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

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(渲染内圆)来模仿单选按钮,幸运的是可以在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;
}

工作演示.