CSS 更改单选按钮的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6662650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change Background-Color of a Radio Button
提问by vpascoal
Is it possible to change the background color of a radio button input in Firefox/Chrome like in IE? (Without using images)
是否可以像在 IE 中一样在 Firefox/Chrome 中更改单选按钮输入的背景颜色？（不使用图像）
Run this in both IE(<9) and Firefox/Chrome:
在 IE(<9) 和 Firefox/Chrome 中运行：
input[type="radio"] {
background: red;
}<input type="radio" /> RadioButton回答by Valerio Gentile
Alternatively it is possible to change the border using CSS.
或者，可以使用 CSS 更改边框。
This is the input radio:
这是输入收音机：
<input name="myinput" id="myinput" type="radio" value="1" class="highlighted" />
And this is the CSS:
这是 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 */
}
回答by Luke
The short answer is "no".
最简洁的答案是不”。
Even if you do manage to get something that works in one browser, browsers tend to handle form controls very differently, meaning it's nigh impossible to achieve cross-browser compatibility.
即使您确实设法获得了在一个浏览器中工作的东西，浏览器往往会以非常不同的方式处理表单控件，这意味着几乎不可能实现跨浏览器兼容性。
Disappointing, I know. Check out this article for more info: http://www.456bereastreet.com/archive/200409/styling_form_controls/
令人失望，我知道。查看这篇文章了解更多信息：http: //www.456bereastreet.com/archive/200409/styling_form_controls/
Just by the way, why do you want to change the background color? Generally a radio button background will just pick up the background color of its container.
顺便问一下，为什么要更改背景颜色？通常，单选按钮背景只会选择其容器的背景颜色。
回答by Jonathan Hodgson
I know this is an old question bit it still comes up quite high if you google the question so here is my solution.
我知道这是一个老问题，如果你用谷歌搜索这个问题，它仍然会出现相当高的问题，所以这是我的解决方案。
Style a <label>element that is directly after the radio button.
<label>为直接位于单选按钮之后的元素设置样式。
HTML
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
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;
}
回答by tituskalai
To change the background color of a radio button input Only in IE
仅在 IE 中更改单选按钮输入的背景颜色
HTML
HTML
<input type="radio" name="custom">
<input type="radio" name="custom">
CSS
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. */
}
