如何更改单选按钮的颜色？答案

【问题标题】：How do I change the color of radio buttons?如何更改单选按钮的颜色？
【发布时间】：2011-05-14 07:50:00
【问题描述】：

i意思是，单个单个按钮本身由中心的圆形和点组成（选择按钮时）。我要改变的是两者的颜色。这可以使用 CSS 完成吗？

【问题讨论】：

使用 CSS 你可以使用filter: grayscale(1); 来表示深灰色，或者使用filter: hue-rotate() 来表示其他颜色，以防你不想创建自定义元素。
感谢@27px 你的建议有效，很好？？？？？？？

【解决方案1】：

快速解决方法是使用 :after 覆盖单选按钮输入样式，但创建自己的自定义工具包可能是更好的做法。

    input[type='radio']:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #d1d3d1;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #ffa500;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

<input type='radio' name="gender"/>
<input type='radio' name="gender"/>

【讨论】：

这对我来说效果很好。当您不想添加任何额外元素或使用图像时，这是一个很好的解决方案。
一般浏览器只接受容器元素的 ":after" 样式 - 正如 W3C 中定义的那样。输入不是容器，因此通常不支持样式后。 w3.org/TR/CSS2/generate.html#before-after-content
只是添加一个时间戳来强制执行之前的观察 - 它仍然只适用于 Chrome (60.0.3112.90)。我在 Microsoft Edge（38.14393.1066.0）和 Firefox（54.0.1，32 位）上尝试过，但没有骰子。
从@markreyes 更新：适用于 Chrome（64 位 73.0.3683.75）、works somewhat in Safari (12.0.3)，不适用于 Firefox（64 位 65.0.1） 2019 年 3 月 15 日。
我不得不在 chrome 中使用 left="-5px" 或者我的一些标签被遮挡了

【解决方案2】：

单选按钮是特定于每个操作系统/浏览器的原生元素。无法更改其颜色/样式，除非您想实现自定义图像或使用包含图像的自定义 Javascript 库（例如 this - cached link）

【讨论】：

我相信是的。据我所知，没有浏览器提供配置单选按钮外观的方法，您必须使用 JS 库来完成此操作。
或者使用css，但你需要像你说的那样的图像。这有点奇怪
发布 8/1/2014：此方法现在将禁用并从提交的表单数据中删除输入字段。这是对那些将复选框置于视线之外的公司的滥用行为的回应，这些公司宣布他们的用户同意访问者在继续之前无法评估的许可和规定。如果文字按钮未显示在屏幕上，则视为“已禁用”
阅读下面的答案，了解使用 CSS 的现代解决方案。
'this' 链接当前是 404'ing。如果它再次出现，请告诉我们！

【解决方案3】：

正如 Fred 所提到的，没有办法在颜色、大小等方面对单选按钮进行原生样式设置。但是您可以使用 CSS 伪元素来设置任何给定单选按钮的冒名顶替者，并为其设置样式。谈到 JamieD 所说的，关于我们如何使用 :after 伪元素，您可以同时使用 :before 和 :after 来获得理想的外观。

这种方法的好处：

为您的单选按钮设置样式，并为内容添加标签。
将外缘颜色和/或选中的圆圈更改为您喜欢的任何颜色。
通过修改背景颜色属性和/或可选使用 opacity 属性使其具有透明外观。
缩放单选按钮的大小。
在需要的地方添加各种阴影属性，例如 CSS 阴影插图。
将这个简单的 CSS/HTML 技巧融入到各种 Grid 系统中，例如 Bootstrap 3.3.6，这样它就可以在视觉上与您的其余 Bootstrap 组件相匹配。

下面的简短演示说明：

为每个单选按钮设置一个相对内嵌块
隐藏原生单选按钮感觉无法直接设置样式。
样式和对齐标签
在 :before 伪元素上重建 CSS 内容以做 2 件事 - 设置单选按钮外缘的样式并将元素设置为首先出现（标签内容的左侧）。你可以在这里学习伪元素的基本步骤 - http://www.w3schools.com/css/css_pseudo_elements.asp
如果单选按钮被选中，则请求标签以显示 CSS 内容（单选按钮中的样式点）。

HTML

<div class="radio-item">
    <input type="radio" id="ritema" name="ritem" value="ropt1">
    <label for="ritema">Option 1</label>
</div>

<div class="radio-item">
    <input type="radio" id="ritemb" name="ritem" value="ropt2">
    <label for="ritemb">Option 2</label>
</div>

CSS

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-item label {
  color: #666;
  font-weight: normal;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
}

.radio-item input[type=radio]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 10px;
  content: " ";
  display: block;
  background: #004c97;
}

short demo 看看它的实际应用

总之，不需要 JavaScript、图像或电池。纯 CSS。

【讨论】：

这项技术在 Chrome (60.0.3112.90) 中对我有用。我也在 Microsoft Edge（38.14393.1066.0）和 Firefox（54.0.1，32 位）上尝试过。
在 Safari 11.1（最新）中为我工作。
快进到 2021 年，这适用于 Edge 88.0.705.53、chrome 88.0.4324.104 和 firefox 81.0.1。很好的解决方案，谢谢
这适用于 chrome 90.0.4430.212 和其他版本。非常好的解决方案，感谢@klewis
很好的解决方案！临时通知是将border-radius更改为50％，然后循环会更圆

【解决方案4】：

仅当您针对基于 webkit 的浏览器（Chrome 和 Safari，也许您正在开发 Chrome WebApp，谁知道...）时，您才可以使用以下内容：

input[type='radio'] {
   -webkit-appearance: none;
}

然后将其设置为一个简单的 HTML 元素，例如应用背景图像。

在选择输入时使用input[type='radio']:active，以提供备用图形

更新：从 2018 年起，您可以添加以下内容以支持多个浏览器供应商：

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

【讨论】：

外观被标记为实验技术：developer.mozilla.org/en-US/docs/Web/CSS/appearance
工作就像一个魅力！
您应该使用:checked 来区分“选定”单选按钮之间的样式，而不是使用:active。

【解决方案5】：

您可以通过两种纯 CSS 方式实现自定义单选按钮

通过使用 CSS appearance 删除标准外观并应用自定义外观。不幸的是，这在 IE for Desktop 中不起作用（但在 IE for Windows Phone 中起作用）。演示：

input[type="radio"] {
  /* remove standard background appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 25px;
  height: 25px;
  padding: 6px;
  /* background-color only for content */
  background-clip: content-box;
  border: 2px solid #bbbbbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked {
  background-color: #93e026;
}

/* optional styles, I'm using this for centering radiobuttons */
.flex {
  display: flex;
  align-items: center;
}

<div class="flex">
  <input type="radio" name="radio" id="radio1" />
  <label for="radio1">RadioButton1</label>
</div>
<div class="flex">
  <input type="radio" name="radio" id="radio2" />
  <label for="radio2">RadioButton2</label>
</div>
<div class="flex">
  <input type="radio" name="radio" id="radio3" />
  <label for="radio3">RadioButton3</label>
</div>

通过隐藏单选按钮并将自定义单选按钮外观设置为label 的伪选择器。顺便说一下，这里不需要绝对定位（我在大多数演示中都看到了绝对定位）。演示：

*,
*:before,
*:after {
  box-sizing: border-box;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]+label:before {
  content: "";
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 25px;
  height: 25px;
  padding: 6px;
  margin-right: 3px;
  /* background-color only for content */
  background-clip: content-box;
  border: 2px solid #bbbbbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked + label:before {
  background-color: #93e026;
}

/* optional styles, I'm using this for centering radiobuttons */
label {
  display: flex;
  align-items: center;
}

<input type="radio" name="radio" id="radio1" />
<label for="radio1">RadioButton1</label>
<input type="radio" name="radio" id="radio2" />
<label for="radio2">RadioButton2</label>
<input type="radio" name="radio" id="radio3" />
<label for="radio3">RadioButton3</label>

【讨论】：

【解决方案6】：

您可以按照 css 技巧中的说明使用复选框 hack

http://css-tricks.com/the-checkbox-hack/

单选按钮的工作示例：

http://codepen.io/Angelata/pen/Eypnq

input[type=radio]:checked ~ .check {}
input[type=radio]:checked ~ .check .inside{}

可在 IE9+、Firefox 3.5+、Safari 1.3+、Opera 6+、Chrome 中运行。

【讨论】：

我喜欢这个答案，但是 css-tricks.com .visually-hidden 类已经过时了。今天，我会使用： .visually-hidden { display:none; }

【解决方案7】：

试试这样的：

#yes{
  border:2px solid white;
  box-shadow:0 0 0 1px #392;
  appearance:none;
  border-radius:50%;
  width:12px;
  height:12px;
  background-color:#fff;
  transition:all ease-in 0.2s;

}
#yes:checked{
  background-color:#392;
}
#no{
  border:2px solid white;
  box-shadow:0 0 0 1px #932;
  appearance:none;
  border-radius:50%;
  width:12px;
  height:12px;
  background-color:#fff;
  transition:all ease-in 0.2s;

}
#no:checked{
  background-color:#932;
}

<input id="yes" type="radio" name="s"><label for="yes">Yes</label></br>
<input id="no" type="radio" name="s"><label for="no">No</label>

代码更少，看起来更好，你不需要玩:before，:after和position就可以达到效果。

【讨论】：

为我工作！谢谢。
绝对天才！说真的，程序员只是喜欢把事情复杂化。不过不是你
无法在 iPhone 上的 Safari 上运行
嗯.. 能发个截图吗？

【解决方案8】：

input[type='radio'] { accent-color: #232323; }

但它不适用于 safari 和歌剧。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。
这并不能真正回答问题。如果您有其他问题，可以点击进行提问。要在此问题有新答案时收到通知，您可以follow this question。一旦你有足够的reputation，你也可以add a bounty 来引起对这个问题的更多关注。 - From Review
如果您不介意跨浏览器的兼容性，这可以工作。谢谢！

【解决方案9】：

简单的跨浏览器自定义单选按钮示例

.checkbox input{
    display: none;
}
.checkbox input:checked + label{
    color: #16B67F;
}
.checkbox input:checked + label i{
    background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg');
}
.checkbox label i{
    width: 15px;
    height: 15px;
    display: inline-block;
    background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%;
    background-size: 12px;
    position: relative;
    top: 1px;
    left: -2px;
}

<div class="checkbox">
  <input type="radio" name="sort" value="popularity" id="sort1">
  <label for="sort1">
        <i></i>
        <span>first</span>
    </label>

  <input type="radio" name="sort" value="price" id="sort2">
  <label for="sort2">
        <i></i>
        <span>second</span>
    </label>
</div>

https://jsfiddle.net/kuzroman/ae1b34ay/

【讨论】：

这不适用于引导程序，你能用引导程序更新吗
图像源（svgs）和小提琴已经死了。因此，sn-p 不起作用。

【解决方案10】：

我们可以使用 :after 和 :before 创建额外的元素（因此我们不必对 HTML 进行太多更改）。然后对于单选按钮和复选框，我们可以使用 :checked。我们也可以使用其他一些伪元素（例如 :hover）。使用这些的混合，我们可以创建一些非常酷的自定义表单。 check this

【讨论】：

【解决方案11】：

我构建了另一个 @klewis' 代码示例的分支，通过使用 :before/:after 伪元素和隐藏的单选输入按钮来演示一些纯 CSS 和渐变的操作。

HTML：

sample radio buttons:
<div style="background:lightgrey;">
    <span class="radio-item">
        <input type="radio" id="ritema" name="ritem" class="true" value="ropt1" checked="checked">
        <label for="ritema">True</label>
    </span>

    <span class="radio-item">
        <input type="radio" id="ritemb" name="ritem" class="false" value="ropt2">
        <label for="ritemb">False</label>
    </span>
</div>

：

CSS：

.radio-item input[type='radio'] {
    visibility: hidden;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 5px;
    padding: 0;
}
    .radio-item input[type=radio]:before {
        position: relative;
        margin: 4px -25px -4px 0;
        display: inline-block;
        visibility: visible;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        border: 2px inset rgba(150,150,150,0.75);
        background: radial-gradient(ellipse at top left, rgb(255,255,255) 0%, rgb(250,250,250) 5%, rgb(230,230,230) 95%, rgb(225,225,225) 100%);
        content: "";
    }
        .radio-item input[type=radio]:checked:after {
            position: relative;
            top: 0;
            left: 9px;
            display: inline-block;
            visibility: visible;
            border-radius: 6px;
            width: 12px;
            height: 12px;
            background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
            content: "";
        }
            .radio-item input[type=radio].true:checked:after {
                background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
            }
            .radio-item input[type=radio].false:checked:after {
                background: radial-gradient(ellipse at top left, rgb(255,225,200) 0%, rgb(250,200,150) 5%, rgb(200,25,0) 95%, rgb(100,25,0) 100%);
            }
.radio-item label {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    margin: 0;
    padding: 0;
}

预览： https://www.codeply.com/p/y47T4ylfib

【讨论】：

【解决方案12】：

对于那些喜欢从最小示例开始开发的人，这里有一个不依赖于label 的简单自定义单选按钮：

[type="radio"] {
    visibility: hidden; /* hide default radio button */
  /* you may need to adjust margin here, too */
}
[type="radio"]::before { /* create pseudoelement */
    border: 2px solid gray; /* thickness, style, color */
    height: .9em; /* height adjusts with font */
    width: .9em; /* width adjusts with font */
    border-radius: 50%; /* make it round */
    display: block; /* or flex or inline-block */
    content: " "; /* won't display without this */
    cursor: pointer; /* appears clickable to mouse users */
    visibility: visible; /* reverse the 'hidden' above */
}

[type="radio"]:checked::before { /* selected */
  /* add middle dot when selected */
  /* slightly bigger second value makes it smooth */
  /* even more (e.g., 20% 50%) would make it fuzzy */
    background: radial-gradient(gray 36%, transparent 38%);
}

<br>
<input type="radio" name="example" id="one" value="one">
<label for="one">one</label>
<br>
<br>
<input type="radio" name="example" id="two" value="two">
<label for="two">two</label>

【讨论】：

我最近不得不在一个项目中使用这种方法，而上面 Marcus 的示例是我发现在有两个以上收音机时唯一有效的方法。

【解决方案13】：

试试这个带有过渡的 css：

Demo

$DarkBrown: #292321;

$Orange: #CC3300;

div {
  margin:0 0 0.75em 0;
}

input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    color: $DarkBrown;
    font-family:Arial, sans-serif;
    font-size:14px;
}
input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}

input[type="radio"] + label span {
     background-color:$DarkBrown;
}

input[type="radio"]:checked + label span{
     background-color:$Orange;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

HTML：

<div>
  <input type="radio" id="radio01" name="radio" />
  <label for="radio01"><span></span>Radio Button 1</label>
</div>

<div>
 <input type="radio" id="radio02" name="radio" />
 <label for="radio02"><span></span>Radio Button 2</label>
</div>

【讨论】：

【解决方案14】：

原生 CSS 无法做到这一点。您必须使用背景图片和一些 javascript 技巧。

【讨论】：

【解决方案15】：

正如其他人所说，没有办法在所有浏览器中实现这一点，因此跨浏览器的最佳方法是不显眼地使用 javascript。基本上你必须把你的单选按钮变成链接（通过 CSS 完全可定制）。每次点击链接都将绑定到相关的单选框，切换他的状态和所有其他状态。

【讨论】：

【解决方案16】：

为了我的使用，我想做的只是改变颜色而不是别的，所以我从@klewis 那里得到了答案并将其改为......

使用相对 % 和 em 而不是固定 px，使收音机与浏览器默认设置（在我的情况下为 Chrome）相同。警告：em 基于input[type=radio] 的字体大小，可以继承。可能需要对以下值进行调整。
通过不使用 display: none; 并将 :before 和 :after 应用于原始单选而不是标签来保留原始单选按钮的辅助功能（如聚焦时的轮廓）。

/* make default radio 'invisible' */
input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* make new radio outer circle */
input[type=radio]:before {
  content: " ";
  display: inline-block;
  position: relative;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  border: 1px solid grey;
  background-color: transparent;
}

/* change colour of radio outer circle when checked */
input[type=radio]:checked:before {
  border-color: green;
}

/* make new radio inner circle when checked */
input[type=radio]:checked:after {
  content: " ";
  display: block;
  position: absolute;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  top: 0.4em;
  left: 0.13em;
  background: green;
}

`

【讨论】：

【解决方案17】：

将单选按钮绑定到样式标签可能会有所帮助。 this answer 中的更多详细信息。

【讨论】：

【解决方案18】：

一个聪明的方法是创建一个单独的 div，其高度和宽度为 - 例如 - 50px，然后将 50px 的半径放置在您的单选按钮上...

【讨论】：

【解决方案19】：

您可以在单选输入中嵌入一个 span 元素，然后在选中单选输入时选择要呈现的颜色。查看以下来自 w3schools 的示例。

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00a80e;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
</style>
<body>

<h1>Custom Radio Buttons</h1>
<label class="container">One
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

</body>

改变下面这段代码的背景颜色就可以了。

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00a80e;
}

来自how to create a custom radio button

【讨论】：

【解决方案20】：

如果你使用react bootstrap Form.check，你可以这样做

HTML

<Form.Check
type="radio"
id="Radio-card"
label={`check me out`}
name="paymentmethod"
value="card"
/>

SCSS

.form-check {
    display: flex;
    align-items: center;
    input[type="radio"] {
    -moz-appearance: none;
    appearance: none;
          
    width: 11px;
    height: 11px;
    padding: 1px;
    background-clip: content-box;
    border: 1px solid hotpink;
    background-color: white;
    border-radius: 50%;
    }
          
    input[type="radio"]:checked {
    outline: none;
    background-color: hotpink;
    border: 1px solid hotpink;
    }
    label {
    font-size: 14px;
    font-weight: 600;
    }
}

【讨论】：

【解决方案21】：

您应该使用accent-color CSS 属性，该属性为输入或进度条等用户界面控件设置强调色。

input {
    accent-color: red;
}

input,
progress {
  accent-color: red;
}

/* Other styles */
label {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: 1.25rem;
  margin-bottom: .625rem;
}

input {
  flex: 0 0 auto;
  height: 1.25rem;
  width: 1.25rem;
}

input[type="range"] {
  width: 12.5rem;
}

<label><input name="radio" type="radio" checked></input>Radio button</label>
<label><input name="radio" type="radio"></input>Another radio button</label>
<label><input name="check" type="checkbox" checked></input>Checkbox</label>
<label><input name="range" type="range"></input>Range input</label>
<label><progress value="50" max="100"></progress>Progress bar</label>

目前，在 2022 年 2 月，it is supported for most modern browsers，但 Safari 仍在开发它，因为它处于其技术预览版。

【讨论】：

【解决方案22】：

一个简单的解决方法是使用以下 CSS 属性。

input[type=radio]:checked{
    background: \*colour*\;
    border-radius: 15px;
    border: 4px solid #dfdfdf;
}

【讨论】：