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

我的意思是，单选按钮本身由一个圆形和中心的一个点组成(当按钮被选中时)。我想改变的是两者的颜色。使用CSS可以做到这一点吗?

当前回答

单选按钮是特定于每个操作系统/浏览器的原生元素。没有办法改变它的颜色/风格，除非你想实现自定义图像或使用自定义Javascript库，其中包括图像(例如这个-缓存链接)

2010-11-23 08:10:23

其他回答

您可以在无线电输入中嵌入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;
}

来源于如何创建自定义单选按钮

2020-01-19 20:42:08

您应该使用重音颜色CSS属性，它为用户界面控件(如输入(单选按钮，复选框…)或进度条设置重音颜色，大多数现代浏览器都支持它。

input {
    accent-color: red;
}

2022-02-03 09:36:19

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

2018-11-21 18:58:24

对于我的使用，我想做的只是改变颜色，没有其他，所以我已经从@klewis的答案，并将其更改为…

使收音机与浏览器默认(在我的情况下是Chrome)相同，使用相对%和em而不是固定的px。注意:em基于输入[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; }

2021-03-22 17:35:05

你可以像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任何浏览器。

2015-01-20 09:07:03

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

推荐文章

最新文章

标签