发表于: 2021-02-21 19:53:30

1 879


今天完成的事情:完成了任务十

明天计划的事情:开始任务十一

遇到的问题:单选按钮的默认样式无法修改

解决: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;

}




返回列表 返回列表
评论

    分享到