Html 是否可以更改所选单选按钮中心圆的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23167637/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to change the color of selected radio button's center circle
提问by T J
Is it possible to style the center circle of a selected radio button, at least in webkit browsers…?
是否可以设置所选单选按钮的中心圆的样式，至少在 webkit 浏览器中...？
What I have now: 
我现在所拥有的：
What I want:
我想要的是：
I can change the background color, shadow etc as follows
我可以改变背景颜色，阴影等如下
#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);
}
Any ideas..?
有任何想法吗..？
回答by King King
You can mimic the radio button using some round border trick (to render the outer circle) and the pseudo-element :before(to render the inner circle) which can fortunately be used on an input field of radiotype:
您可以使用一些圆形边框技巧（渲染外圆）和伪元素: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;
}
回答by snowerest
You can bind radio-button to label, than you can hide radio-button and style label whatever you like. 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>回答by Vangel Tzo
You could also apply a background-image when the radio button is checked
您还可以在选中单选按钮时应用背景图像
[type="radio"]:checked {
width: 16px;
height: 16px;
-webkit-appearance: none;
background-image: ...
}
An example: http://jsfiddle.net/yZ6tM/
一个例子：http: //jsfiddle.net/yZ6tM/
