radio 单选框选中颜色变化

最新推荐文章于 2024-03-21 00:10:19 发布

添杯热茶

最新推荐文章于 2024-03-21 00:10:19 发布

阅读量1.3w

点赞数 2

文章标签： css html html5 css3

本文链接：https://blog.youkuaiyun.com/weixin_45461128/article/details/117420970

版权

在移动端和小程序开发中，有时需要根据UI设计改变radio按钮的颜色，但默认radio不支持直接修改。本文提供了一种解决方案，通过CSS伪元素`::before`覆盖原有样式，实现自定义颜色，同时保持可点击功能。示例代码展示了如何用CSS实现这一效果。

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

radio 本身样式修改

很多时候在做移动端,还有小程序的时候经常会遇见UI设计的图中单选的颜色会很据系统的颜色而改变，但是radio并不支持改变其本身的颜色，于是就产生了如何去改变radio颜色的问题。

代码如下（示例）：

<input type="radio" name="sex" value="boy"><label for="boy" class="sexStyle">男</label> <br>
<input type="radio" name="sex" value="girl" ><label for="girl" class="sexStyle">女</label>

在这里插入图片描述

默认是蓝色，而且也不是很好看，现在就可以通过css的伪元素来修改这个样式。

input[type="radio"]+label::before {
     content: " ";
     display: inline-block;
     vertical-align: middle;
     width: 13px;
     height: 13px;
     border-radius: 50%;
     border: 1px solid #999999;
     margin-right: 0.2rem;
     box-sizing: border-box;
     margin-top: -0.1rem;
}

input[type="radio"]:checked+label::before {
     background-color: #d73c3a;
     background-clip: content-box;
     border: 1px solid #d73c3a;
     padding: 0.1rem;
     box-sizing: border-box;
}
input[type="radio"] {
     position: absolute;
     clip: rect(0, 0, 0, 0);
}