Question

是否可以像在IE中一样更改Firefox / Chrome中单选按钮输入的背景颜色？（不使用图像）

在IE（＆lt; 9）和Firefox / Chrome中运行：

input[type="radio"] {
  background: red;
}

<input type="radio" /> RadioButton

View on JSFiddle

Answer 1

或者可以使用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 */
}

Answer 2

简短的回答是“不”。

即使您确实设法在一个浏览器中获得了某些功能，但浏览器倾向于以非常不同的方式处理表单控件，这意味着几乎不可能实现跨浏览器兼容性。

令人失望，我知道。有关详细信息，请查看此文章：http://www.456bereastreet.com/archive/200409/styling_form_controls/

顺便问一下，为什么要改变背景颜色？通常，单选按钮背景只会拾取其容器的背景颜色。

Answer 3

我知道这是一个古老的问题，如果你谷歌这个问题仍然会很高，所以这是我的解决方案。

设置直接在单选按钮之后的<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;
}

Answer 4

仅在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. */
}

Answer 5

输入广播只是一个圆圈，因此您可以更改＆lt;的样式。 a＆gt;或者＆lt; div>像这样的标签：

Here

更改单选按钮的背景颜色

5 个答案: