前言
2017-百度前端技术学院编码任务：自定义checkbox， radio样式
任务目的
- 深入了解html label标签
- 了解CSS边框、背景、伪元素、伪类（注意和伪元素区分）等属性的设置
- 了解CSS中常见的雪碧图，并能自己制作使用雪碧图
任务描述
- 参考 样例点击查看，实现页面开发，要求实现效果基本一致
注意：
尝试背景图和伪元素两种不同方式实现，对比两种方式各自的优缺点。
注意测试不同情况，尤其是极端情况下的效果。
实现
整体解决思路：隐藏表单默认样式，伪类或背景图片来自定义样式，通过伪类:checked来改变选择状态并且切换样式。
label
<label>它通常关联一个控件，或者是将控件放置在label元素内，或者是用作其属性。
产生关联可以和控件产生联系，例如：点击标签label元素可以改变<input type="radio">的 :checked 状态，或者获得<input type="text" id="User" name="Name" />的焦点状态。
之前思考过隐藏input后，为什么要用label元素来伪装表单呢？原因是其他元素无法和input产生关联，点击其他元素是无法改变表单的checked 状态，而点击label是可以的。
示例
/*放在标签元素内产生关联*/
<label>Click me <input type="text" id="User" name="Name" /></label>
/*通过设置for属性产生关联*/
<label for="User">Click me</label>
<input type="text" id="User" name="Name" />
伪类和伪元素的区别
其实关于这部分自己之前做过一次总结。结论就是，伪类和伪元素都是给元素添加效果，不同的是伪类是相当于添加一个类class，伪元素相当于添加一个元素element。
另外:checked CSS 伪类选择器表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")) 。用户通过点击元素或选择其他的值，可以改变该元素的 :checked 状态，并:checked属性赋给一个新的对象(例如其他的option值)。
input[type="radio"]:checked
表示页面上的所有选中的radio按钮input[type="checkbox"]:checked
表示页面上的所有选中的checkbox按钮option:checked
表示页面上的所有选中的select的选项
伪类和背景图片实现
伪类
点击label或者input改变input的checked状态，同时改变样式和添加伪元素来达到模拟表单效果。
.input-disguise__radio > input:checked + label::after,
.input-disguise2__radio > input:checked::after{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
content: '';
text-align: center;
width: 6px;
height: 6px;
border-radius: 50%;
background: #d81e06;
}
.input-disguise__checkbox > input:checked + label::after,
.input-disguise2__checkbox > input:checked::after{
position: absolute;
top:-2px;
left: 1px;
content: '\2714';
text-align: center;
color: #d81e06;
font-size: 12px;
}
背景图片（雪碧图）
之前设置label元素模拟表单样式，这次通过背景图片来达到效果。
然后通过background-position来定位背景图片位置.雪碧图的使用就是为了减少图片请求。
.input-sprite__radio > label,.input-sprite__checkbox > label{
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid #d9d9d9;
border-radius: 2px;
background: url(img/input-sprite.png) 12px 0 no-repeat;
background-size: 200% 100%;
}
.input-sprite__radio > input[type=radio]:checked + label{
background-position: 0 0;
width: 14px;
height: 14px;
border: none;
}
.input-sprite__checkbox > input[type=checkbox]:checked + label{
background-position: 100% 0;
width: 14px;
height: 14px;
border: none;
}
- 关于伪元素和雪碧图的优缺点：
雪碧图优点是减少代码量，简单有效；缺点是无法精准定位，没有伪元素准确，修改麻烦。
伪元素优点是图片请求减少，定位准确，方便修改；缺点代码量多，实现较复杂的效果比较麻烦。
参考链接
