有没有办法使用 CSS 更改 RadioBox 颜色？

Question

我在我的简单项目中使用了一个单选按钮。选中时，单选按钮看起来不错，带有蓝色背景。但是在使用 Edge 和 Firefox 运行相同的代码时，背景颜色是黑色。

我听说单选按钮样式是特定于浏览器的。这是真的吗？

是否有可能在没有自定义单选按钮的情况下更改样式？

如果自定义单选按钮是唯一的选项，那么如何将其呈现为与 Google Chrome 中的一样？

Radio Button visible in Chrome

Radio Button visible in Firefox and Edge

Answer 1

我使用自定义 css 重新创建了 chrome 单选按钮，并添加了蓝色背景而不是灰色。它在 chrome、firefox 和 edge 上显示相同。不过，您可能需要对 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: black;
  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 gray;
  background-color: transparent;
}

.radio-item input[type=radio]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 11px;
  left: 12px;
  content: " ";
  display: block;  
  background: blue;
  background-color: blue;
  
 
  
}