自定义checkbox， radio样式总结

时间：2021-07-25 17:21:34

任务目的

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

任务描述

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

自定义checkbox， radio样式总结

任务注意事项

  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

相关文章