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

Posted 2023-02-22

【中文标题】如何更改单选按钮的颜色？

【英文标题】：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;