发表于： 2018-05-25 10:36:01
2 482
今天完成的事情：任务十总结；
明天的计划：轮播图
今天的收获
任务十总结：input原生样式修改和折叠按钮都是需要和label配合使用；
对单选按钮自定义样式，我们以前一直用的脚本来实现，不过现在可以使用新的伪类 :checkbox 来实现。
如果直接对单选按钮设置样式，那么这个伪类并不实用，因为没有多少样式能够对单选按钮起作用。不过，倒是可以基于单选按钮的勾选状态借助组合选择符来给其他元素设置样式。
很多时候，无论是为了表单元素统一，还是为了用户体验良好，我们都会选择 label 元素和 input[type="radio"] 一起使用。当<label>元素与单选按钮关联之后，也可以起到触发开关的作用。
思路：
1. 可以为<label>元素添加生成性内容(伪元素)，并基于单选按钮的状态来为其设置样式；
2. 然后把真正的单选按钮隐藏起来；
3. 最后把生成内容美化一下。
返回列表
评论