.labl {
display : block;
width: 400px;
}
.labl > input{ /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}
.labl > input + div{ /* DIV STYLES */
cursor:pointer;
border:2px solid transparent;
}
.labl > input:checked + div{ /* (RADIO CHECKED) DIV STYLES */
background-color: #ffd6bb;
border: 1px solid #ff6600;
}
<label class="labl">
<input type="radio" name="radioname" value="one_value" checked="checked"/>
<div>Small</div>
</label>
<label class="labl">
<input type="radio" name="radioname" value="another" />
<div>Small</div>
</label>
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.