自定义checkbox， radio样式总结

标签：相关   for   bsp   相同   web   view   实现   定义   自己   

任务目的

1. 深入了解html label标签
2. 了解CSS边框、背景、伪元素、伪类（注意和伪元素区分）等属性的设置
3. 了解CSS中常见的雪碧图，并能自己制作使用雪碧图

任务描述

1. 参考 样例（点击查看），实现页面开发，要求实现效果基本一致

任务注意事项

1. 尝试背景图和伪元素两种不同方式实现，对比两种方式各自的优缺点。
2. 注意测试不同情况，尤其是极端情况下的效果。

参考资料

1. MDN label: 了解html中label的基本知识
2. MDN background-position: 了解背景图片定位相关知识
3. MDN :checked: 了解input的:checked伪类的基本知识以及应用场景
4. MDN :before:了解input的:before伪元素的基本知识
5. MDN :after:了解input的:after伪元素的基本知识

自定义checkbox， radio样式总结

1、HTML <label> Tag

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

5、已提交作业

代码地址https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task4-2

预览地址http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task4-2/index.html

自定义checkbox， radio样式总结

标签：相关   for   bsp   相同   web   view   实现   定义   自己   

原文地址：http://www.cnblogs.com/melbourne1102/p/6592708.html