我的意思是，单选按钮本身由一个圆形和中心的一个点组成(当按钮被选中时)。我想改变的是两者的颜色。使用CSS可以做到这一点吗?
当前回答
试试这样做:
#yes{ border:2px solid white; box-shadow:0 0 0 1px #392; appearance:none; border-radius:50%; width:12px; height:12px; background-color:#fff; transition:all ease-in 0.2s; } #yes:checked{ background-color:#392; } #no{ border:2px solid white; box-shadow:0 0 0 1px #932; appearance:none; border-radius:50%; width:12px; height:12px; background-color:#fff; transition:all ease-in 0.2s; } #no:checked{ background-color:#932; } <input id="yes" type="radio" name="s"><label for="yes">Yes</label></br> <input id="no" type="radio" name="s"><label for="no">No</label>
有更少的代码，它看起来更好，你不需要玩:之前，:之后和位置达到效果。
其他回答
将单选按钮绑定到样式标签可能会有所帮助。进一步的细节在这个回答中。
一个简单的修复方法是使用以下CSS属性。
input[type=radio]:checked{
background: \*colour*\;
border-radius: 15px;
border: 4px solid #dfdfdf;
}
只有当你的目标是基于webkit的浏览器(Chrome和Safari，也许你正在开发Chrome WebApp，谁知道…)，你可以使用以下:
input[type='radio'] {
-webkit-appearance: none;
}
然后将其设置为一个简单的HTML元素，例如应用背景图像。
使用input[type='radio']:active用于选择输入时，提供备用图形
更新:截至2018年，您可以添加以下内容以支持多个浏览器供应商:
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
单选按钮是特定于每个操作系统/浏览器的原生元素。没有办法改变它的颜色/风格，除非你想实现自定义图像或使用自定义Javascript库，其中包括图像(例如这个-缓存链接)
这对我很有效，
简单添加css属性:
输入(type = "电台"]{强调色:红色;}
这里是资源链接
