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

Question

我的意思是,单选按钮本身由圆形和中心点(当选择按钮时)组成.我想要改变的是两者的颜色.可以使用CSS完成吗？

Answer 1

您可以使用 CSSaccent-color属性来更改颜色。

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

它适用于 Chrome/Edge 93+、Firefox 92+ 和 Safari 15.4+（来自caniuse 的浏览器支持信息。）

Answer 2

快速解决方法是使用覆盖单选按钮输入样式: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"/>

Answer 3

单选按钮是特定于每个OS /浏览器的本机元素.有没有办法改变它的颜色/风格,除非你要实现自定义图片或使用自定义JavaScript库,其中包括图像(例如本 - 缓存链接)

Answer 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;
}

Answer 5

正如弗雷德所提到的,在颜色,大小等方面无法原生地设置单选按钮的样式.但是你可以使用CSS Pseudo元素来设置任何给定单选按钮的冒充者,并设置它的样式.触及JamieD所说的,关于我们如何使用:在Pseudo元素之后,你可以同时使用:before和:after来实现理想的外观.

这种方法的好处:

• 设置单选按钮的样式,还包括内容标签.
• 将外圈颜色和/或勾选的圆圈更改为您喜欢的任何颜色.
• 给它一个透明的外观,修改背景颜色属性和/或opacity属性的可选用法.
• 缩放单选按钮的大小.
• 在需要的地方添加各种投影属性,例如CSS投影阴影.
• 将这个简单的CSS/HTML技巧混合到各种网格系统中,例如Bootstrap 3.3.6,因此它可以直观地匹配其余的Bootstrap组件.

以下简短演示的说明:

• 为每个单选按钮设置相对内嵌块
• 隐藏原生单选按钮感觉没有办法直接设置它.
• 样式并对齐标签
• 重构CSS内容:在Pseudo-element之前做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;
}

一个简短的演示,看它在行动

总之,不需要JavaScript,图像或电池.纯CSS.

Answer 6

尝试这样的事情：

#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达到效果。

Answer 7

您可以使用复选框hack,如css技巧中所述

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等.

Answer 8

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

1. 通过使用CSS删除标准外观appearance并应用自定义外观.不幸的是,这在IE for Desktop中不起作用(但适用于Windows Phone的IE).演示:

   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>

2. 通过隐藏radiobutton并将自定义radiobutton外观设置为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>

Answer 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/