更改单选按钮的背景颜色

Posted 2023-02-21

【中文标题】更改单选按钮的背景颜色

【英文标题】：Change Background-Color of a Radio Button

【发布时间】：2011-10-03 12:12:03

【问题描述】：

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

在 IE(

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

<input type="radio" /> RadioButton

View on JSFiddle

【问题讨论】：

这能回答你的问题吗？ How do I change the color of radio buttons?

【参考方案1】：

将此属性添加到您的单选输入选择器

input[type="radio"]
  accent-color:green;

【参考方案2】：

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

【参考方案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;

【参考方案4】：

简短的回答是“不”。

即使您确实设法获得了在一个浏览器中工作的东西，浏览器对表单控件的处理方式往往也大不相同，这意味着几乎不可能实现跨浏览器兼容性。

令人失望，我知道。查看这篇文章了解更多信息：http://www.456bereastreet.com/archive/200409/styling_form_controls/

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

【参考方案5】：

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

【参考方案6】：

输入单选只是一个圆圈，所以你可以像这样改变或标签的样式：

Here

【讨论】：

感谢您的回复！但我只想改变单选按钮的背景

单选按钮只是一个圆，没有文字，所以我们不能改变它的背景。

有谁能给我正确的解决方案吗？如果不是，为什么我的回答得到 4 票反对……说“实话”是不对的……