巧⽤CSS3伪类选择器⾃定义checkbox和radio的样式
由于原⽣的checkbox和radio的样式太简陋了，在设计页⾯的时候，设计师往往会设计⾃⼰的checkbox和radio样式。⼀半情况下，为了适应各个浏览器的兼容性，我们都会⽤其他的元素替代原⽣的checkbox和radio，然后⽤js实现选中和未选中时候的样式，⽤来模拟checkbox和radio。
例如这种：
⽤其他元素模拟（以checkbox为例）：
<div class='checkbox'></div>html radio点击变颜
$('.checkbox').click(function(){
if($(this).hasClass("checked")){
$(this).removeClass("checked");
}else{
$(this).addClass("checked");
}
});
运⽤JS添加点击事件，切换选中和未选中的状态。
那么，能仅仅只⽤样式，改变原⽣的checkbox的样式呢？
使⽤CSS实现：
在表单元素中，为了扩⼤checkbox的点击范围，我们经常⽤label和checkbox相连，现在也可以运⽤这个关系，把样式加在label上，隐藏checkbox（设置透明度，不能display:none，否则关联会失效）。
html结构：
<input type="checkbox" id="mycheck"/>
<lable for="mycheck">check me</label>
css样式：
input[type="checkbox"] + label::before {
content: '\a0'; /* non-break space */
display: inline-block;
vertical-align: .2em;
width: .8em;
height: .8em;
margin-right: .2em;
border-radius: .2em;
background: silver;
text-indent: .15em;
line-height: .65;
}
利⽤伪元素::before给label添加样式，利⽤CSS3的伪类选择器:checked，:hover，:focus，:disabled设置不⽤状态的样式
input[type="checkbox"]:checked + label::before {
content: '\2713';
background: yellowgreen;
}
input[type="checkbox"]:focus + label::before {
box-shadow: 0 0 .1em .1em #58a;
}
input[type="checkbox"]:disabled + label::before {
background: gray;
box-shadow: none;
color: #555;
}
这样，仅仅使⽤样式就能显⽰不同状态下的checkbox样式了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。