/// CSS
input[type=radio] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
input[type=radio] +
label:before {
font-family: FontAwesome;
display: inline-block;
content: "\f1db";
letter-spacing: 10px;
font-size: 1.2em;
color: #535353;
}
input[type=radio]:checked +
label:before {
content: "\f00c";
font-size: 1.2em;
color: red;
letter-spacing: 5px;
width: 35px: 5px;
}
input[type=radio]:focus +
label:before {
font-weight: bold;
color:orange;
}
// HTML
<div>
<input
id="radio"
name="question"
type="radio">
<label
for="radio">
Radio 1</label>
</div>
<div>
<input
id="radio2"
name="question"
type="radio">
<label
for="radio2">Radio
2</label>
</div>
/// REsult
No comments:
Post a Comment