发表于： 2020-01-03 22:19:50
1 1179
今天完成的事情：完成了讲小课堂，加深了如何改变默认RADIO和SELECT的样式的印象
明天计划的事情：继续任务
遇到的问题：测试代码出现单词错误比对修改时间较长
收获：加深了相关知识的印象，如select的修改方式主要是用外层包裹div来实现。如图
样式以及和默认的有较大区别，代码图
css代码
修改radio的样式也很简单，如图效果
换成了绿圆圈，代码图
<input type="radio" name="sex" id="male">
<label for="male">男</label>
<input type="radio" name="sex" id="female">
<label for="female">女</label>
css
input[type="radio"] + label::before{
content: "";
display: inline-block;
box-sizing: border-box;
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;
}
/*给单选按钮的勾选状态添加不同的样式*/
input[type="radio"]:checked + label::before{
background-color: #01cd78;
background-clip: content-box;
padding: .2em;
}
/*现在把原来的单选按钮隐藏：*/
input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
明天继续做任务
返回列表
评论