54 lines
919 B
CSS
54 lines
919 B
CSS
.radio {
|
|
vertical-align: top;
|
|
width: 17px;
|
|
height: 17px;
|
|
margin: 0 3px 0 0;
|
|
}
|
|
|
|
.radio + label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.radio:not(checked) {
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
|
|
.radio:not(checked) + label {
|
|
position: relative;
|
|
padding: 0 0 0 35px;
|
|
}
|
|
|
|
.radio:not(checked) + label:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -3px;
|
|
left: 0;
|
|
width: 22px;
|
|
height: 22px;
|
|
border: 1px solid #CDD1DA;
|
|
border-radius: 50%;
|
|
background: #FFF;
|
|
}
|
|
|
|
.radio:not(checked) + label:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 4px;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: #9FD468;
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5);
|
|
opacity: 0;
|
|
transition: all .2s;
|
|
}
|
|
|
|
.radio:checked + label:after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.radio:focus + label:before {
|
|
box-shadow: 0 0 0 3px rgba(255, 255, 0, .5);
|
|
} |