我的意思是,单个按钮本身由中心的圆形和一个点组成(选择按钮时)。我想改变的是两者的颜色。这可以使用 CSS 完成吗?
原文由 catandmouse 发布,翻译遵循 CC BY-SA 4.0 许可协议
我的意思是,单个按钮本身由中心的圆形和一个点组成(选择按钮时)。我想改变的是两者的颜色。这可以使用 CSS 完成吗?
原文由 catandmouse 发布,翻译遵循 CC BY-SA 4.0 许可协议
一个快速修复方法是使用 :after
覆盖单选按钮输入样式,但是创建自己的自定义工具包可能是更好的做法。
input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #d1d3d1;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
input[type='radio']:checked:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #ffa500;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
<input type='radio' name="gender"/>
<input type='radio' name="gender"/>
原文由 Jamie 发布,翻译遵循 CC BY-SA 3.0 许可协议
3 回答975 阅读✓ 已解决
4 回答1.3k 阅读✓ 已解决
2 回答939 阅读✓ 已解决
2 回答1.5k 阅读✓ 已解决
2 回答1.3k 阅读✓ 已解决
2 回答912 阅读✓ 已解决
2 回答1.1k 阅读✓ 已解决
单选按钮是特定于每个操作系统/浏览器的本机元素。没有办法改变它的颜色/样式,除非你想实现自定义图像或使用包含图像的自定义 Javascript 库(例如 这个- 缓存链接)