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

时间：2010-11-23 08:06:48

标签： html css forms radio-button

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

21 个答案:

答案 0 :(得分：68)

快速解决方法是使用: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"/>

答案 1 :(得分：58)

单选按钮是特定于每个OS /浏览器的本机元素。除非您想要实现自定义图像或使用包含图像的自定义Javascript库（例如this - cached link）

，否则无法更改其颜色/样式

答案 2 :(得分：31)

仅如果您要定位基于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;
}

答案 3 :(得分：27)

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

这种方法的好处：

  • 设置单选按钮的样式，并包含内容标签。
  • 将外圈颜色和/或勾选的圆圈更改为您喜欢的任何颜色。
  • 给它一个透明的外观，修改背景颜色属性和/或选择使用不透明度属性。
  • 缩放单选按钮的大小。
  • 添加各种投影属性，例如CSS drop shadow inset。
  • 将这个简单的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;
}

short demo以查看其实际效果

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

答案 4 :(得分：10)

你可以使用复选框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浏览器中使用。

答案 5 :(得分：7)

您可以用两种纯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>

答案 6 :(得分：5)

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

答案 7 :(得分：4)

创建额外的元素我们可以使用：after，：before（所以我们不必更改那么多的HTML）。然后，对于单选按钮和复选框，我们可以使用：选中。我们也可以使用其他一些伪元素（例如：悬停）。使用这些混合物，我们可以创建一些非常酷的自定义表单。 check this

答案 8 :(得分：4)

我用@ klewis'代码示例构建了另一个fork，以通过使用：before /：after伪元素和隐藏的单选按钮来演示一些纯CSS和渐变的玩法。

enter image description here

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

答案 9 :(得分：1)

尝试这样的事情：

<html>
<head>
<style>
#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;
}
</style>
<body>
<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>
</body>
</html>
代码更少，看起来更好，你不需要玩 :before 、 :after 和 position 来达到效果。

答案 10 :(得分：1)

您还需要一些JavaScript。例如，请参阅here。

答案 11 :(得分：1)

对于那些喜欢从最小示例开始开发的人，这里有一个不依赖于 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>

答案 12 :(得分：1)

尝试使用转换时的css：

enter image description here

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>

答案 13 :(得分：1)

正如其他人所说，没有办法在所有浏览器中实现这一点，所以这样做的最好方法是浏览器使用javascript不引人注目。基本上你必须将你的radiobutton变成链接（完全可以通过CSS定制）。每次点击链接都将绑定到相关的radiobox，切换他的状态和所有其他。

答案 14 :(得分：1)

原生CSS无法做到这一点。你将不得不使用背景图片和一些javascript技巧。

答案 15 :(得分：0)

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

答案 16 :(得分：0)

您可以将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

答案 17 :(得分：0)

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

答案 18 :(得分：0)

如果您使用的是 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;
    }
}

答案 19 :(得分：0)

为了我的使用，我想做的就是改变颜色而不是其他任何东西，所以我从@klewis 那里得到了答案并将其更改为...

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

/* 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;
}

`

答案 20 :(得分：-1)

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

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