发表于: 2019-03-19 20:42:04
1 322
今天完成的事情:今天没有把任务10做完,就做了一点,其他时间都在看input
明天计划的事情:明天计划把input看完,然后把任务10做完
遇到的问题:input改变单选样式
<div class="female"> <input type="radio" id="female" name="sex" /> <label for="female">女</label></div><div class="male"> <input type="radio" id="male" name="sex" /> <label for="male">男</label></div>
2. 生成一个伪元素,作为美化版的单选按钮,先给伪元素添加一些样式:
input[type="radio"] + label::before { content: "\a0"; /*不换行空格*/ display: inline-block; vertical-align: middle; font-size: 18px; width: 1em; height: 1em; margin-right: .4em; border-radius: 50%; border: 1px solid #01cd78; text-indent: .15em; line-height: 1; }
现在的样子:
原来的单选按钮仍然可见,但是我们先给单选按钮的勾选状态添加样式:
3. 给单选按钮的勾选状态添加不同的样式:
input[type="radio"]:checked + label::before { background-color: #01cd78; background-clip: content-box; padding: .2em; }
现在的样子:
4. 现在把原来的单选按钮隐藏:
input[type="radio"] { position: absolute; clip: rect(0, 0, 0, 0); }
收获:简单了解了一下input单选
评论