是否可以像在 IE 中一样更改 Firefox/Chrome 中单选按钮输入的背景颜色？ （不使用图片）
在 IE(
input[type="radio"] {
background: red;
}<input type="radio" /> RadioButton【问题讨论】：
标签： css radio-button background-color
将此属性添加到您的单选输入选择器
input[type="radio"]{
accent-color:green;
}
【讨论】：
仅在 IE 中更改单选按钮输入的背景颜色
HTML
<input type="radio" name="custom">
<input type="radio" name="custom">
CSS
input[type=radio] {
width: 20px;
height: 20px;
}
/* This will make the border gray when the button is not checked. */
input[type=radio]:not(:checked)::-ms-check {
border-color: gray;
}
input[type=radio]::-ms-check {
border-color: red; /* This will make the border red when the button is checked. */
color: red; /* This will make the circle red when the button is checked. */
}
【讨论】：
我知道这是一个老问题，如果你用谷歌搜索这个问题，它仍然会很高，所以这是我的解决方案。
为单选按钮后的<label> 元素设置样式。
HTML
<input type=radio name="colour" value="green" id="colour-green" /><label for="colour-green" ></label>
<input type=radio name="colour" value="red" id="colour-red" /><label for="colour-red" ></label>
<input type=radio name="colour" value="blue" id="colour-blue" /><label for="colour-blue" ></label>
CSS
input[type=radio]{
display:none;
}
input[type=radio] + label{
border: 1px solid black;
background-color: red;
border-radius: 50%;
display: block;
...
}
input[type=radio]:checked + label{
background-color: green;
}
【讨论】：
简短的回答是“不”。
即使您确实设法获得了在一个浏览器中工作的东西，浏览器对表单控件的处理方式往往也大不相同，这意味着几乎不可能实现跨浏览器兼容性。
令人失望，我知道。查看这篇文章了解更多信息：http://www.456bereastreet.com/archive/200409/styling_form_controls/
顺便问一下，为什么要更改背景颜色？通常，单选按钮背景只会选取其容器的背景颜色。
【讨论】：
或者，可以使用 CSS 更改边框。
这是输入电台：
<input name="myinput" id="myinput" type="radio" value="1" class="highlighted" />
这是 CSS：
.highlighted {
outline:1px solid #F00; /* Firefox, Opera, Chrome, IE8+ */
*filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1,color=#FF0000); /* IE6, IE7 */
}
【讨论】：
输入单选只是一个圆圈，所以你可以像这样改变或标签的样式：
【讨论】：