当前位置：theitroad>Html 如何更改单选按钮的颜色？

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

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/4253920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 05:24:23 　来源:igfitidea点击:

How do I change the color of radio buttons?

htmlcssformsradio-button

提问by catandmouse

I mean, a radio button itself consists of a round shape and a dot at the center (when the button is selected). What I want to change is the color of both. Can this be done using CSS?

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

采纳答案by Fred

A radio button is a native element specific to each OS/browser. There is no way to change its color/style, unless you want to implement custom images or use a custom Javascript library which includes images (e.g. this- cached link)

单选按钮是特定于每个操作系统/浏览器的本机元素。没有办法改变它的颜色/样式，除非你想实现自定义图像或使用包含图像的自定义 Javascript 库（例如这个-缓存链接）

回答by JamieD

A quick fix would be to overlay the radio button input style using :after, however it's probably a better practice to create your own custom toolkit.

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

回答by klewis

As Fred mentioned, there is no way to natively style radio buttons in regards to color, size, etcc. But you can use CSS Pseudo elements to setup an impostor of any given radio button, and style it. Touching on what JamieD said, on how we can use the :after Pseudo element, you can use both :before and :after to achieve a desirable look.

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

Benefits of this approach:

这种方法的好处：

  • Style your radio button and also Include a label for content.
  • Change the outer rim color and/or checked circle to any color you like.
  • Give it a transparent look with modifications to background color property and/or optional use of the opacity property.
  • Scale the size of your radio button.
  • Add various drop shadow properties such as CSS drop shadow inset where needed.
  • Blend this simple CSS/HTML trick into various Grid systems, such as Bootstrap 3.3.6, so it matches the rest of your Bootstrap components visually.
  • 为您的单选按钮设置样式并包括内容标签。
  • 将外缘颜色和/或选中的圆圈更改为您喜欢的任何颜色。
  • 通过修改背景颜色属性和/或可选使用不透明度属性，使其具有透明外观。
  • 缩放单选按钮的大小。
  • 在需要的地方添加各种投影属性，例如 CSS 投影插图。
  • 将这个简单的 CSS/HTML 技巧混合到各种网格系统中，例如 Bootstrap 3.3.6，这样它就可以在视觉上与你的 Bootstrap 组件的其余部分相匹配。

Explanation of short demo below:

下面的简短演示说明：

  • Set up a relative in-line block for each radio button
  • Hide the native radio button sense there is no way to style it directly.
  • Style and align the label
  • Rebuilding CSS content on the :before Pseudo-element to do 2 things - style the outer rim of the radio button and set element to appear first (left of label content). You can learn basic steps on Pseudo-elements here - http://www.w3schools.com/css/css_pseudo_elements.asp
  • If the radio button is checked, request for label to display CSS content (the styled dot in the radio button) afterwards.
  • 为每个单选按钮设置一个相关的内嵌块
  • 隐藏原生单选按钮感觉没有办法直接设置样式。
  • 样式和对齐标签
  • 在 :before 伪元素上重建 CSS 内容来做两件事 - 设置单选按钮的外缘样式并将元素设置为首先出现（标签内容的左侧）。你可以在这里学习伪元素的基本步骤 - http://www.w3schools.com/css/css_pseudo_elements.asp
  • 如果单选按钮被选中，则请求标签在之后显示 CSS 内容（单选按钮中的样式点）。

The HTML

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>

The CSS

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

A short demoto see it in action

一个简短的演示来查看它的运行情况

In conclusion, no JavaScript, images or batteries required. Pure CSS.

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

回答by Omiod

Only if you are targeting webkit-based browsers (Chrome and Safari, maybe you are developing a Chrome WebApp, who knows...), you can use the following:

只有当你的目标是基于 webkit 的浏览器（Chrome 和 Safari，也许你正在开发一个 Chrome WebApp，谁知道......），你可以使用以下内容：

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

And then style it as if it were a simple HTML element, for example applying a background image.

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

Use input[type='radio']:activefor when the input is selected, to provide the alternate graphics

使用input[type='radio']:active当选择输入，以提供交替的图形

Update: As of 2018 you can add the following to support multiple browser vendors:

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

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

回答by Vadim Ovchinnikov

You can achieve customized radio buttons in two pure CSS ways

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

  1. Via removing standard appearance using CSS appearanceand applying custom appearance. Unfortunately this was doesn't work in IE for Desktop (but works in IE for Windows Phone). Demo:

    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. Via hiding radiobutton and setting custom radiobutton appearance to label's pseudoselector. By the way no need for absolute positioning here (I see absolute positioning in most demos). Demo: 

    *,
*: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>

  1. 通过使用 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>

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

回答by Amit Choukroun

you can use the checkbox hack as explained in css tricks

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

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

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

working example of radio button:

单选按钮的工作示例：

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

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

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

Works in IE9+, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome anything.

适用于 IE9+、Firefox 3.5+、Safari 1.3+、Opera 6+、Chrome 任何版本。

回答by kuzroman

simple cross browser custom radio button example for you

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

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

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

回答by GkDreamz

Well to create extra elements we can use :after, :before (so we don't have to change the HTML that much). Then for radio buttons and checkboxes we can use :checked. There are a few other pseudo elements we can use as well (such as :hover). Using a mixture of these we can create some pretty cool custom forms. check this

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

回答by Ahmad Aghazadeh

Try this css with transition:

试试这个带过渡的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>

回答by Ahmad Aghazadeh

As other said, there's no way to achieve this in all browser, so best way of doing so crossbrowser is using javascript unobtrusively. Basically you have to turn your radiobutton into links (fully customizable via CSS). each click on link will be bound to the related radiobox, toggling his state and all the others.

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

相关推荐

是否可以更改 HTML 的 <marquee> 标签的速度？

是否可以更改 HTML 的 <marquee> 标签的速度？

Html

Html "X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"

Html 选中和选中的哪些值是假的？

Html 选中和选中的哪些值是假的？

带有输入条目选项的 HTML 组合框

带有输入条目选项的 HTML 组合框

相关推荐
最近更新
标签