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

Question

是否可以为所选单选按钮的中心圆设置样式，至少在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);
}

任何想法......？

Answer 1

你可以使用一些圆边界技巧（渲染外圆）和伪元素:before（渲染内圆）来模仿单选按钮，幸运的是可以在{{的输入字段上使用1}}输入：

radio

Working Demo.

Answer 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>

Answer 3

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

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

示例：http://jsfiddle.net/yZ6tM/