最近做的项目选项框比较多,为了让界面看起来更加美观,决定自定义radio和checkbox,功能不变的情况下提高用户体验。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
这里比较关键的一点是用到label的for属性。
w3c的label介绍:
<label> 标签为 input 元素定义标注(标记)。label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
所以当我们为label用for属性绑定了指定元素id时候,只要我们点击label,就会触发绑定的元素。可以在w3c查看例子。http://www.w3school.com.cn/tiy/t.asp?f=html_label
好了原理讲明白后,就可以开始自定义我们的radio和checkbox。大致思路就是用label绑定radio,然后设置radio为不显示,在自定义label的样式就行了。
html代码:
<div class="testOptions">
<ul>
<li><input type="radio" id="radio01" name="check"><label for="radio01"></label>选项</li>
<li><input type="radio" id="radio02" name="check"><label for="radio02"></label>选项</li>
<li><input type="radio" id="radio03" name="check"><label for="radio03"></label>选项</li>
<li><input type="radio" id="radio04" name="check"><label for="radio04"></label>选项</li>
</ul>
<ul>
<li><input type="checkbox" id="checkbox01" name="check"><label for="checkbox01"></label>选项</li>
<li><input type="checkbox" id="checkbox02" name="check"><label for="checkbox02"></label>选项</li>
<li><input type="checkbox" id="checkbox03" name="check"><label for="checkbox03"></label>选项</li>
<li><input type="checkbox" id="checkbox04" name="check"><label for="checkbox04"></label>选项</li>
</ul>
</div>
<div class="_testOptions">
<ul>
<li><input type="checkbox" id="checkbox001" name="check"><label for="checkbox001"></label>选项</li>
<li><input type="checkbox" id="checkbox002" name="check"><label for="checkbox002"></label>选项</li>
<li><input type="checkbox" id="checkbox003" name="check"><label for="checkbox003"></label>选项</li>
<li><input type="checkbox" id="checkbox004" name="check"><label for="checkbox004"></label>选项</li>
</ul>
</div>
css代码:
.testOptions li,._testOptions li{margin: 5px 0px;}
/*隐藏选项框*/
.testOptions input[type='checkbox'],.testOptions input[type='radio'],
._testOptions input[type='checkbox']{
visibility: hidden;
cursor: pointer;
}
/*设置label样式*/
.testOptions input[type='radio']+label,.testOptions input[type='checkbox']+label,
._testOptions input[type='checkbox']+label{
display: inline-block;
vertical-align: top;
width: 1.3em;
height: 1.3em;
margin-right:5px;
position: relative;
background-color: #d8d4d4;
transition: background 0.5s linear;
box-sizing:border-box;
-webkit-transition: background 0.3s linear;
-webkit-box-sizing:border-box;
}
/*相邻选择器来模拟选项被选择的效果*/
.testOptions input[type='radio']+label{border-radius: 50%;}
.testOptions input[type='radio']:checked+label {border:0.35em #d8d4d4 solid;background-color: #0ab5f1;}
.testOptions input[type='checkbox']:checked+label {background-image: url("image/check_32px.png");background-size: 100% 100%;}
._testOptions input[type='checkbox']:checked+label:after{content: "√";font-size: 20px;font-weight:bold;color: #0ab5f1;}
</style>
效果图:(一个利用伪元素打钩,一个图片)