前端CSS基础——表单元素单选框的美化

我们先生成单选框

<label class="radio-item"><input type="radio" name="a"><span>男</span></label><label class="radio-item"><input type="radio" name="a"><span>女</span></label>

生成的单选框是这样的
看起来并不美观，但是表单元素又是H5默认样式，没办法更改单选框的属性，那么如何更改单选框样式呢
其实有很多种方法，现在我们来利用CSS更改表单单选框的样式

• 首先在input后面添加空的span样式，然后将空的span样式生成新的单选框，再把input单选框隐藏就行了。

<label class="radio-item"><input type="radio" name="a"><span class="radio"></span><span>男</span></label><label class="radio-item"><input type="radio" name="a"><span class="radio"></span><span>女</span></label>

添加css样式

.radio-item .radio{//定义单选框边框display: inline-block;width: 12px;height: 12px;border:1px solid #999;border-radius: 50%;}.radio-item input:checked+.radio{//更改单选框选中颜色border-color:#008c8c ;}.radio-item input:checked+.radio::after{//在选中单选框里面添加一个小圆心content: "";display: block;width: 6px;height: 6px;border-radius: 50%;background: #008c8c;margin-top:3px ;margin-left: 3px;}.radio-item input:checked~span{//将文字颜色变成定义颜色color: skyblue;}.radio-item input[type="radio"]{//隐藏单选框display: none;}

效果图

总结

以上是生活随笔为你收集整理的前端CSS基础——表单元素单选框的美化的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。