难题
CSS最初出现时，对表单元素的样式控制力有限。不过近年来，各种浏览器逐步放开CSS属性对变单控件的作用范围。从而设置大多数表单控件的样。
不过单选框和复选框不在此例，这两个控件绝大多数浏览器无法设置样式。
解决方案
通过label 标签的：before伪元素实现。
当<label>元素与复选框关联后，点击label标签同样能触发事件。
通过对伪元素的美化实现复选框。
1.HTML代码如下
<input id="checkbox1" type="checkbox" value="1"/>
<label for="checkbox1"> 测试 </label>
2.美化伪元素代码如下
input[type="checkbox"] + label::before{
content: '\a0'; /* 不换行空格*/
display:inline-block;
vertical-align: -1px;
width: 15px;
height:15px;
margin-right:5px;
border-radius: 3px;
background: silver;
text-indent: 2px;
line-height:16px;
}
初始.jpeg
3.设置选中状态
input[type="checkbox"]:checked + label::before{
content:'\2713';
background: yellowgreen;
}
4.将复选框 隐藏起来。不能设置 display:none ,会将它从tab键切换焦点的队列中删除。
代码如下
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}
5.设置获取焦点和禁用状态样式
input[type="checkbox"]:focus + label::before{
box-shadow:0 0 2px 2px #58a;
}
input[type="checkbox"]:disabled + label::before{
background: gray;
box-shadow:none;
color:#555;
}
这样就完成了checkbox的美化。
最终样式如下：
默认.jpg
选中.jpg
获取焦点.jpg
这样就完成了checkbox的美化。
可以通过类似的设置创建一个开关按钮。（checkbox隐藏,修改label样式）
html
<input id="switch" type="checkbox" class="switch">
<label for="switch">提交<label/>
CSS
<style>
input[class="switch"] {
position:absolute;
clip: rect(0,0,0,0);
}
input[class="switch"]+ label {
width:65px;
display: inline-block;
background:#ccc;
background: linear-gradient(#ddd,#bbb);
border: 1px solid rgba(0,0,0, 0.1);
border-radius:5px;
text-align: center;
text-shadow: 0 1px 1px white
}
input[class="switch"]:checked+ label,
input[class="switch"]:active+ label {
box-shadow: 1px 1px 1px rgba(0,0,0,0.3) inset;
border-color:rgba(0,0,0,0.4);
background: #bbb;
}
</style>
效果图：
switch.jpg
switch-click.jpg
