自定义checkbox， radio样式总结

Posted 2020-09-05 程序媛家

任务目的

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