效果图:
HTML:
<div>
<div style="position: relative;display: inline-block">
<input type="radio" name="riado1" value="1" class="chose" checked="checked"
style="visibility: hidden"/><b></b>选中
</div>
<div style="position: relative;display: inline-block;margin-left: 20px">
<input type="radio" name="riado1" value="2" class="chose" style="visibility:
hidden"/><b></b>未选中
</div>
</div>
CSS:
input[type="radio"] {
visibility: hidden;
}
.chose + b {
position: absolute;
top: 6px;
left: 0;
display: inline-block;
padding: 5px;
background-color: #ffffff;
border-radius: 3px;
border: 1px solid #CACACA;
}
.chose:checked + b:after {
opacity: 1;
}
.chose:checked + b:after {
content: '';
opacity: 1;
position: absolute;
width: 7px;
height: 3px;
background: transparent;
top: 2px;
left: 1px;
border: 2px solid #41B44B;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}