是否可以更改所选单选按钮中心圆的颜色

Posted 2023-03-05

【中文标题】是否可以更改所选单选按钮中心圆的颜色

【英文标题】：Is it possible to change the color of selected radio button's center circle

【发布时间】：2014-06-03 18:15:57

【问题描述】：

是否可以设置选定单选按钮的中心圆的样式，至少在 webkit 浏览器中...？

我现在拥有的：

我想要的：

我可以如下改变背景颜色、阴影等

#searchPopup input[type="radio"]
  -webkit-appearance:none;
  box-shadow: inset 1px 1px 1px #000000;
  background:#fff;


#searchPopup input[type="radio"]:checked
  -webkit-appearance:radio;
  box-shadow: none;
  background:rgb(252,252,252);

有什么想法吗？

【参考方案1】：

您可以使用一些圆形边框技巧（渲染外圆）和伪元素:before（渲染内圆）模仿单选按钮，幸运的是可以在radio类型的输入字段上使用：

input[type='radio'] 
  -webkit-appearance:none;
  width:20px;
  height:20px;
  border:1px solid darkgray;
  border-radius:50%;
  outline:none;
  box-shadow:0 0 5px 0px gray inset;


input[type='radio']:hover 
  box-shadow:0 0 5px 0px orange inset;


input[type='radio']:before 
  content:'';
  display:block;
  width:60%;
  height:60%;
  margin: 20% auto;    
  border-radius:50%;    

input[type='radio']:checked:before 
  background:green;

Working Demo.

【讨论】：

这在 Internet Explorer (IE) 中不工作，请您给我建议如何在 IE 中工作。

@user3577774 OP 要求在基于 Webkit 的浏览器中工作的简单解决方案（至少如此）。跨浏览器解决方案更复杂。我做了一个这样的演示。这几乎是完美的，你可以在这里看到它jsfiddle.net/viphalongpro/sVFU3

添加 -moz-appearance 以使其与 Firefox 兼容

【参考方案2】：

您可以将单选按钮绑定到标签，而不是您可以隐藏任何您喜欢的单选按钮和样式标签。 Example.

div 
    background-color: #444444;
    display: flex-column;
    display:webkit-flex-column;

input 
    margin: 10px;
    position: absolute;
    left: 100px;

label 
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 10px;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #ffffff;
    box-shadow: inset 1px 0 #000000;

#green 
   border: 8px solid green;

#red 
    border: 8px solid red;

input:checked + #green 
    border: 8px solid #ffffff;
    background-color:green !important;

input:checked + #red 
    border: 8px solid #ffffff;
    background-color: red !important;

Click a button on the left - radio button on the right will be checked.
<div>
    <input id="greenInput" type="radio" name="someName">
    <label id="green" for="greenInput"> </label>
    <input id="redInput" type="radio" name="someName">
    <label id="red" for="redInput"></label>
 </div>

【讨论】：

不完全确定为什么这个答案被忽略了？提供了最好和最有用的答案，也是最适合跨浏览器的想法！

很久以前，但我同意安德鲁的观点。这似乎是功能和兼容性的最佳整体选择。

【参考方案3】：

您还可以在选中单选按钮时应用背景图像

[type="radio"]:checked 
    width: 16px;
    height: 16px;
    -webkit-appearance: none;
    background-image:  ...

一个例子：http://jsfiddle.net/yZ6tM/

【讨论】：

这在 Internet Explorer (IE) 中不工作，请您给我建议如何在 IE 中工作。

这是一个解决方案，但相当昂贵......对于大多数情况，css 更漂亮和高效。