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

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

当前回答

你可以使用CSS的重音颜色属性来改变颜色。

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

它适用于Chrome/Edge 93+， Firefox 92+和Safari 15.4+(浏览器支持信息来自caniuse。)

2021-09-13 23:01:45

其他回答

如果你使用react bootstrap Form。你可以这样做

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

2021-03-08 12:58:06

您可以在无线电输入中嵌入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[type='radio'] {
    accent-color: #232323;
}

它适用于Chrome/Edge 93+， Firefox 92+和Safari 15.4+(浏览器支持信息来自caniuse。)

2021-09-13 23:01:45

只有当你的目标是基于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;
}

2010-11-23 08:25:24

这在本地CSS中是不可能的。您必须使用背景图像和一些javascript技巧。

2010-11-23 08:11:33

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

推荐文章

最新文章

标签