radio 单选框选中颜色变化 | 您所在的位置:网站首页 › html中li的圆点怎么改变颜色 › 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); }
|
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |