HTML
<label class="svgCheckbox">
<input type="checkbox" name="test" value="1" checked="checked" class="svgCheckboxOn">
<span>
::before
::after
</span>
</label>
CSS
.svgCheckbox > input[type=checkbox] + span:before {
content: ' ';
position: absolute;
left: -35px;
top: -3px;
width: 25px;
height: 25px;
display: block;
background: #FCFCFC;
border: 2px solid #b1bac1;
border-radius: 2px;
}
.svgCheckbox > input[type=checkbox] + span:after {
content: ' ';
position: absolute;
left: -35px;
top: -3px;
width: 23px;
height: 23px;
display: block;
z-index: 1;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE4MS4yIDI3MyAxNyAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAxODEuMiAyNzMgMTcgMTYiPjxwYXRoIGQ9Ik0tMzA2LjMgNTEuMmwtMTEzLTExM2MtOC42LTguNi0yNC04LjYtMzQuMyAwbC01MDYuOSA1MDYuOS0yMTIuNC0yMTIuNGMtOC42LTguNi0yNC04LjYtMzQuMyAwbC0xMTMgMTEzYy04LjYgOC42LTguNiAyNCAwIDM0LjNsMjMxLjIgMjMxLjIgMTEzIDExM2M4LjYgOC42IDI0IDguNiAzNC4zIDBsMTEzLTExMyA1MjQtNTI0YzctMTAuMyA3LTI1LjctMS42LTM2eiIvPjxwYXRoIGZpbGw9IiMzNzM3MzciIGQ9Ik0xOTcuNiAyNzcuMmwtMS42LTEuNmMtLjEtLjEtLjMtLjEtLjUgMGwtNy40IDcuNC0zLjEtMy4xYy0uMS0uMS0uMy0uMS0uNSAwbC0xLjYgMS42Yy0uMS4xLS4xLjMgMCAuNWwzLjMgMy4zIDEuNiAxLjZjLjEuMS4zLjEuNSAwbDEuNi0xLjYgNy42LTcuNmMuMy0uMS4zLS4zLjEtLjV6Ii8+PHBhdGggZD0iTTExODcuMSAxNDMuN2wtNTYuNS01Ni41Yy01LjEtNS4xLTEyLTUuMS0xNy4xIDBsLTI1My41IDI1My41LTEwNi4yLTEwNi4yYy01LjEtNS4xLTEyLTUuMS0xNy4xIDBsLTU2LjUgNTYuNWMtNS4xIDUuMS01LjEgMTIgMCAxNy4xbDExNC43IDExNC43IDU2LjUgNTYuNWM1LjEgNS4xIDEyIDUuMSAxNy4xIDBsNTYuNS01Ni41IDI2Mi0yNjJjNS4yLTMuNCA1LjItMTIgLjEtMTcuMXpNMTYzNC4xIDE2OS40bC0zNy43LTM3LjdjLTMuNC0zLjQtOC42LTMuNC0xMiAwbC0xNjkuNSAxNjkuNS03MC4yLTcxLjljLTMuNC0zLjQtOC42LTMuNC0xMiAwbC0zNy43IDM3LjdjLTMuNCAzLjQtMy40IDguNiAwIDEybDc3LjEgNzcuMSAzNy43IDM3LjdjMy40IDMuNCA4LjYgMy40IDEyIDBsMzcuNy0zNy43IDE3NC43LTE3Ni40YzEuNi0xLjcgMS42LTYuOS0uMS0xMC4zeiIvPjwvc3ZnPg==') no-repeat center center;
transition: all .2s ease;
transform: scale(0);
opacity: 0;
}
.svgCheckbox > input[type=checkbox]:checked + span:after {
transform: scale(1);
opacity: 1;
}
Currently the only animation that I could think of that I can use is scale. Is it possible to use this technique however to have animation like in link below.
https://codepen.io/tingc10/pen/ZbVMBe/
I need to use the background technique as all the others one were causing problem in internet explorer.
Related
I've already tried anything I could find and basically the general idea is to use following css rule:
input[type=checkbox][disabled] {
background: red !important;
background-color: red !important;
outline: 1px solid red;
}
The problem is that the only rule that is working is the outline. The background just wont change in any way. It remains gray. I'm providing a screenshot of the result of the css rules I posted above.
Is there any working way to successfully change the background color of the disabled checkboxes?
There is no way do it with native appearance, so you must create custom template with label and use pseudo elements like :before or :after:
.flex-container {
display: flex;
flex-flow: row-wrap;
}
.flex-column {
padding: 0 15px;
flex: 0 0 auto;
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
position: absolute;
left: -9999px;
}
[type="checkbox"]:checked + label,
[type="checkbox"]:not(:checked) + label
{
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #ddd;
background: #fff;
border-radius: 5px;
}
[type="checkbox"]:checked + label:after,
[type="checkbox"]:not(:checked) + label:after {
content: '';
width: 8px;
height: 8px;
background: #00579c;
position: absolute;
top: 6px;
left: 6px;
border-radius: 50%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
[type="checkbox"]:not(:checked) + label:after {
-webkit-transform: scale(0);
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
[type="checkbox"]:disabled + label {
opacity: 0.7;
cursor: not-allowed;
}
[type="checkbox"]:disabled + label:before {
border-color: red;
}
<div class="flex-container">
<div class="flex-column">
<input type="checkbox" id="test2">
<label for="test2">Default</label>
</div>
<div class="flex-column">
<input type="checkbox" id="test1" checked>
<label for="test1">Checked</label>
</div>
<div class="flex-column">
<input type="checkbox" id="test3" disabled>
<label for="test3">Disabled</label>
</div>
</div>
I am having some issues I cannot seem to figure out with styling a toggle switch as required. I currently have it like this:
It however needs to look like this:
Here is my HTML:
<label class="switch"><input #handlingUnitAdvancedOptionsCheckBox id="handlingUnitAdvancedOptionsCheckBox" type="checkbox" [checked]="handlingModel.advancedOptions"
(change)="handlingUnitAdvancedOptionsToggle(handlingUnitAdvancedOptionsCheckBox.checked)" />
<span class="slider round"></span>
</label>
Here is my css:
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 50px!important;
height: 24px!important;
cursor: pointer;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
display: block;
width: 22px!important;
height: 22px!important;
margin: 1px;
background: #fff;
position: absolute;
top: 0;
bottom: 0;
right: 26px;
border-radius: 20px;
transition: margin .3s ease-in 0s;
transition-property: margin;
transition-duration: 0.3s;
transition-timing-function: ease-in;
transition-delay: 0s;
box-shadow: 1px 2px 7px #444;
}
input:checked + .slider {
background-color: #236093;
}
input:focus + .slider {
box-shadow: 0 0 1px #236093;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
Not sure where I am going wrong here or what I need to adjust. I have tried changing the transform and the padding but I cannot seem to get it right.
You can use the following solution:
.switch {
cursor: pointer;
display: inline-block;
height: 24px;
position: relative;
width: 50px;
overflow:hidden;
}
.switch input {
height: 0;
opacity: 0;
width: 0;
}
.slider {
background: #ccc;
bottom: 0;
cursor: pointer;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
background: #fff;
border-radius: 50%;
bottom: 1px;
box-shadow: 3px 0px 7px #444;
content: "";
display: block;
height: 22px;
left: 1px;
position: absolute;
right: 50px;
top: 1px;
width: 22px;
transition-property: all;
transition-duration: .6s;
}
input:checked + .slider {
background: #236093;
}
input:checked + .slider:before {
box-shadow: -3px 0px 7px #002551;
left: calc(100% - 23px); /** width of .slider:before + 1px */
}
.slider.round {
border-radius: 24px;
}
<label class="switch">
<input #handlingUnitAdvancedOptionsCheckBox id="handlingUnitAdvancedOptionsCheckBox" type="checkbox" [checked]="handlingModel.advancedOptions"
(change)="handlingUnitAdvancedOptionsToggle(handlingUnitAdvancedOptionsCheckBox.checked)" />
<span class="slider round"></span>
</label>
I'm really confused why it is not working. I am using styled-components library and actually I've got a problem with hamburger menu. It changes only when the checkbox is shown. It should work with only css but its not do have any suggestions?
const HamburgerCnt = styled.div`
cursor: pointer;
position: absolute;
top: 35px;
right: 41px;
height: 28px;
width: 30px;
input {
display: none;
}
input + label {
position: absolute;
top: 12px;
right: 0px;
width: 30px;
height: 2px;
background: #fff;
display: block;
transform-origin: center;
transition: .5s ease-in-out;
&:after,
&:before {
transition: .5s ease-in-out;
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #fff;
}
&:before {
top: -10px;
}
&:after {
bottom: -10px;
}
}
input:checked + label {
transform: rotate(45deg);
&:after {
transform: rotate(90deg);
bottom: 0;
}
&:before {
transform: rotate(90deg);
top: 0;
}
}
`;
and Component looks like this
<HamburgerCnt>
<input type="checkbox" name="check" />
<label htmlFor="check" />
</HamburgerCnt>
You should use check as id of the input, not its name.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Using_the_for_attribute
I've made a toggle with the following CSS:
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 25px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
-webkit-transition: .2s;
transition: .2s;
}
.slider:before {
position: absolute;
content: "";
height: 25px;
width: 25px;
left: 0px;
bottom: 0px;
background-color: white;
border-radius: 50%;
-webkit-transition: .2s;
transition: .2s;
}
input:checked + .slider:before {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
Span needs to have an image inside, and when is checked another image, it should look like this:
Need to achieve this with CSS/React.
I was able to make something out:
* {
font-family: 'Open Sans', 'Segoe UI';
}
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 25px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.slider:before {
position: absolute;
content: "";
height: 25px;
width: 25px;
left: 0px;
bottom: 0px;
background-image: url('https://i.imgur.com/J4GQTYs.png');
background-size: contain;
border-radius: 50%;
-webkit-transition: 0.2s;
transition: 0.2s;
}
input:checked + .slider:before {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
background-image: url('https://i.imgur.com/Q0iHcOX.png');
}
input:checked ~ .unchecked,
input ~ .unchecked,
input ~ .checked {
position: absolute;
font-weight: 600;
display: none;
top: 1px;
}
.unchecked {
right: 5px;
}
.checked {
left: 5px;
}
input:checked ~ .checked,
input ~ .unchecked {
display: block;
}
<label class="switch">
<input type="checkbox" />
<span class="slider round"></span>
<span class="checked">FR</span>
<span class="unchecked">EN</span>
</label>
You can add:
background-image: url(IMAGE); for the image and background-size: contain; to make it visiable. Only using the background-image property won't work.
I added them to your example to: slider:before {} and input:checked + .slider:before {} to get the effect you're looking for. I've used different images as you stated as I couldn't find them so quickly. But of course you can just edit the url to the images you prefer (please don't use external images as I did in this example, add them to your server).
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 25px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
-webkit-transition: .2s;
transition: .2s;
}
.slider:before {
position: absolute;
content: "";
height: 25px;
width: 25px;
left: 0px;
bottom: 0px;
background-color: white;
border-radius: 50%;
-webkit-transition: .2s;
transition: .2s;
background-image: url('https://cdn1.iconfinder.com/data/icons/european-country-flags/83/italy-512.png');
background-size: contain;
}
input:checked + .slider:before {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
background-image: url('https://cdn1.iconfinder.com/data/icons/european-country-flags/83/france-512.png');
background-size: contain;
}
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
I've got a styled checkbox where I want to have a link next to the label. The labels have different widths so I can't put the link relative to the left. Due to the styled checkbox I can't 'detect' the width of the label with css.
So to make it clear, in the jsfiddle I've made I want the link info to be to the left of the label.
http://jsfiddle.net/SAZ2P/3/
Cheers!
css:
.selectbox {
position: relative;
display: inline-block;
}
.selectbox input[type="checkbox"] {
visibility: hidden;
}
.selectbox label {
cursor: pointer;
position: absolute;
width: 15px;
height: 15px;
top: 0;
background: #fcfff4;
border: 1px solid #000;
text-indent: 30px;
white-space: nowrap;
letter-spacing: 2px;
line-height: 17px;
}
.selectbox label:after {
opacity: 0;
content: '';
position: absolute;
width: 6px;
height: 4px;
background: transparent;
top: 2px;
left: 3px;
border: 2px solid #333;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.selectbox label:hover::after {
opacity: 0.5;
}
.selectbox input[type=checkbox]:checked + label:after {
opacity: 1;
}
.selectbox a{
float: left;
}
I think it would be best to include the link inside of the label. For example:
<div class="selectbox">
<input type="checkbox" value="brand2" id="brand2" name="brand2" class="box">
<label for="brand2">info brand with longer name</label>
</div>