radio是经常使用的单选按钮,但自带的样式实在不好看,下图是通过美化后的样式:
针对不同选项显示不同的样式,html结构如下(使用了knockout.js来绑定数据,如果不用的话应指定name来确保单选):
<label class="normal">
<input type="radio" value="√" data-bind="checked:Result" />
<span></span>
<span>合格</span>
</label>
<label class="abnormal">
<input type="radio" value="×" data-bind="checked:Result" />
<span></span>
<span>不合格</span>
</label>
<label class="offline">
<input type="radio" value="/" data-bind="checked:Result" />
<span></span>
<span>不适用</span>
</label>
外围使用label来包裹,因为label单击可以实现radio的选中,其他标签不方便。真正的radio隐藏起来,避免太难看,其后紧跟的span用于代替原来的radio显示出单选框的效果,再后面就是一个标签,不要紧。
相关的CSS:
.offline, .normal, .abnormal {
display: inline-block;
margin: 0 10px;
}
.offline input[type=radio], .normal input[type=radio], .abnormal input[type=radio] {
display: none;
}
.offline input[type="radio"] + span, .normal input[type="radio"] + span, .abnormal input[type="radio"] + span {
vertical-align: middle;
width: 24px;
height: 24px;
border: 1px gray solid;
border-radius: 12px;
display: inline-block;
background-color: white;
}
.offline input[type="radio"]:checked + span {
background-color: gray;
}
.normal input[type="radio"]:checked + span {
border: 1px green solid;
background-color: green;
}
.abnormal input[type=radio]:checked + span {
background-color: red;
border: 1px red solid;
}
.abnormal input[type=radio]:checked + span::before {
color: #ffffff;
padding-left: 3px;
font-weight: bold;
content: "×";
font-size:24px;
line-height:24px;
}
.normal input[type=radio]:checked + span::before {
color: #ffffff;
padding-left: 3px;
font-weight: bold;
content: "√";
font-size:24px;
line-height:24px;
}
.offline input[type=radio]:checked + span::before {
color: #ffffff;
padding-left: 0px;
font-weight: bold;
content: "/";
font-size:24px;
line-height:24px;
}