radio 单选框选中颜色变化 |
您所在的位置：网站首页 › html怎么修改文字颜色 › radio 单选框选中颜色变化 |
radio 单选框选中颜色变化
|
radio 本身样式修改
很多时候在做移动端,还有小程序的时候经常会遇见UI设计的图中单选的颜色会很据系统的颜色而改变，但是radio并不支持改变其本身的颜色，于是就产生了如何去改变radio颜色的问题。
代码如下（示例）： 男 女
默认是蓝色，而且也不是很好看，现在就可以通过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); }
|
通过伪元素覆盖原本的颜色，同时又保持了可点击，这样就能非常完美的解决这个问题了。【本文地址】
今日新闻 |
推荐新闻 |