是否可以设置所选单选按钮的中心圆，至少在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);
}
任何想法..？
可以使用一些圆形边界特技（以使外圈）和伪元件: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;
}
当无线电按钮被选中你也可以申请一个背景图像
[type="radio"]:checked {
width: 16px;
height: 16px;
-webkit-appearance: none;
background-image: ...
}
This在Internet Explorer（IE）中无法正常工作，请给我建议它如何在IE中使用。 – prog1011
这是一个解决方案，但相当昂贵的一个...在大多数情况下，css更漂亮和高效。 –
您可以将无线电按钮绑定到标签上，无论您喜欢什么，都可以隐藏无线电按钮和样式标签。 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>不完全确定为什么这个答案被忽略？提供最好和最有用的答案，也是大多数跨浏览器友好的想法！ –
很久以前，但我同意安德鲁。这似乎是功能和兼容性的最佳选择。 –
这不是在Internet Explorer的工作（IE），可以请你给我建议，在IE浏览器是如何工作的，它会。 – prog1011
@ user3577774 OP要求提供一个在基于Webkit的浏览器中工作的简单解决方案（至少如此）。跨浏览器的解决方案更为复杂。我做了一个这样的演示。这是近乎完美的，你可以在这里看到它http://jsfiddle.net/viphalongpro/sVFU3/ –
这将在Chrome和Safari中工作我认为 –