自定义checkbox, radio样式总结

任务目的

  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

上一篇:[转载]有了 malloc/free 为什么还要 new/delete ?


下一篇:如何改变iframe滚动条的样式?