使用伪类选择器修改radio的默认背景色

最新推荐文章于 2023-06-27 10:48:08 发布

good法乐

最新推荐文章于 2023-06-27 10:48:08 发布

阅读量920

点赞数 1

分类专栏：前端工程化文章标签： css3

本文链接：https://blog.youkuaiyun.com/qq_39206750/article/details/109098599

版权

前端工程化专栏收录该内容

11 篇文章

订阅专栏

这篇博客探讨了在CSS中使用伪类选择器`:before`和`:after`修改radio输入元素样式时遇到的样式显示异常问题。作者通过将单选框的宽度和高度设置为0来解决了这个问题，实现了自定义背景色和圆点样式的单选按钮。文章还提供了详细的CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修改后
在这里插入图片描述
修改后

页面

//使用伪类覆盖单选框的样式
.radio_type {
width: 20px;
height: 20px;
appearance: none;
position: relative;
outline: none;
}
.radio_type:before {
content: ‘’;
width: 10px;
height: 10px;
border: 1px solid #00f0ff;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.radio_type:checked:before {
content: ‘’;
width: 10px;
height: 10px;
border: 1px solid #00f0ff;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.radio_type:checked:after {
content: ‘’;
width: 6px;
height: 6px;
text-align: center;
background: #00f0ff;
border-radius: 50%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}