html怎么修改字体颜色-单选按钮颜色在选择时会发生变化

bendan520 2023年9月5日 html 0

收音机本身的风格也发生了很大的变化。我在做联通和小程序的时候，经常遇到UI设计图上的收音机选择的颜色会根据系统的颜色而变化html怎么修改字体颜色，而收音机不支持改变自身的颜色。颜色，因此出现了如何更改单选颜色的问题。

代码如下（示例）：

<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>

默认是红色html怎么修改字体颜色，但是看起来不太好看。现在您可以通过 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);
}

这个问题可以通过用伪元素覆盖之前的颜色同时保持可点击来完美解决。

返回顶部