1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
| .radio {
padding-left: 20px;
}
.radio label {
display: inline-block;
position: relative;
padding-left: 5px;
}
.radio label::before {
content: "";
display: inline-block;
position: absolute;
width: 18px;
height: 18px;
left: 0;
margin-left: -20px;
border: 1px solid #A9A9A9;
border-radius: 50%;
box-shadow: 0px 0px 3px #ccc;
background-color: #fff;
}
.radio label::after {
display: inline-block;
position: absolute;
content: " ";
width: 12px;
height: 12px;
left: 3px;
top: 3px;
margin-left: -20px;
border-radius: 50%;
background-color: #0FB912;
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
transform: scale(0, 0);
transition: all .2s ease-in;
/* IE */
-ms-transition: all .2s ease-in;
/* Safari */
-webkit-transition: all .2s ease-in;
}
.radio input[type="radio"] {
opacity: 0;
}
.radio input[type="radio"]:checked + label::after {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
transition: all .3s ease-in;
/* IE */
-ms-transition: all .3s ease-in;
/* Safari */
-webkit-transition: all .3s ease-in;
} |
Partager