更改单选按钮的背景颜色

Question

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

在两个 IE 中运行此命令（<9) and Firefox/Chrome:

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

<input type="radio" /> RadioButton

在 JSFiddle 上查看

Answer 1

将此属性添加到您的无线电输入选择器

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

Answer 2

或者可以使用 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 3

简短的回答是“不”。

即使您确实设法获得可在一种浏览器中运行的东西，浏览器往往以非常不同的方式处理表单控件，这意味着实现跨浏览器兼容性几乎是不可能的。

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

顺便问一下，为什么要改变背景颜色？一般来说，单选按钮背景只会选择其容器的背景颜色。

Answer 4

试试这个：

.your-class { accent-color: red;  mix-blend-mode: multiply; } 

Answer 5

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

设置直接位于单选按钮后面的

<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 6

更改单选按钮输入的背景颜色仅在 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 7

首先需要禁用浏览器提供的默认样式。然后你可以改变背景颜色。

    input[type="radio"] {
     -webkit-appearance: none; /* For WebKit (Chrome, Safari, Opera) browsers */
     -moz-appearance: none; /* For Mozilla Firefox */
     appearance: none; /* For standard browsers */

     background: red; /* Change the background color */

}

Answer 8

输入单选只是一个圆圈，因此您可以像这样更改 < a > 或 < div > 标签的样式：

这里