[type="radio"]:checked + label:before {
background: #bc6060;
box-shadow: 0 0 0 0.25em #000;
}
[type="radio"]:focus + label:after {
content: '
[type="radio"]:checked + label:before {
background: #bc6060;
box-shadow: 0 0 0 0.25em #000;
}
[type="radio"]:focus + label:after {
content: '\0020\2190';
font-size: 1.5em;
line-height: 1;
vertical-align: -0.125em;
}
[type="radio"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px; margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
label {
display: block;
cursor: pointer;
line-height: 2;
font-size: 1.2em;
}
[type="radio"] + label {
display: block;
}
[type="radio"] + label:before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.25em;
border-radius: 1em;
border: 0.125em solid #fff;
box-shadow: 0 0 0 0.15em #000;
margin-right: 0.75em;
transition: 0.5s ease all;
}
2090';
font-size: 1.5em;
line-height: 1;
vertical-align: -0.125em;
}
[type="radio"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px; margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
label {
display: block;
cursor: pointer;
line-height: 2;
font-size: 1.2em;
}
[type="radio"] + label {
display: block;
}
[type="radio"] + label:before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.25em;
border-radius: 1em;
border: 0.125em solid #fff;
box-shadow: 0 0 0 0.15em #000;
margin-right: 0.75em;
transition: 0.5s ease all;
}
Author: Harshvardhan Malpani
PHP Developer based in New Delhi, India. Working as a freelance web developer providing server deployment, website development and maintenance services.
View all posts by Harshvardhan Malpani
Hi,
Thank you for your piece of code. It is really helpful.
Do you have for checkbob too?
Regards.