发表于： 2021-02-21 19:53:30
1 881
今天完成的事情：完成了任务十
明天计划的事情：开始任务十一
遇到的问题：单选按钮的默认样式无法修改
解决：1.每个input都可以加一个label，点击label，也会触发input的点击
<input type="radio" name="box" id="box">
<label for="box">对口箱</label>
2.label标签可以加背景，或通过其他样式，让背景显示在文字的左边
input[type="radio"] + label::before{
content: "";
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
width: 1.8rem;
height: 1.8rem;
margin-right: 1.6em;
border-radius: 50%;
border: 0.1rem solid #d6d6d6;
}
3.隐藏掉原有的样式
input[type="radio"] {
display:none
}
4.为勾选后添加不同的样式
input[type="radio"]:checked + label::before{
border: 0.7rem solid #1d7ad9;
}
返回列表
评论