是否可以更改所选单选按钮中心圆的颜色 [英] Is it possible to change the color of selected radio button's center circle

问题描述

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

Is it possible to style the center circle of a selected radio button, at least in webkit browsers…?

我现在拥有的:

我想要的:

我可以按如下方式更改背景颜色、阴影等

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..?

推荐答案

您可以使用一些圆形边框技巧(渲染外圆)和伪元素 :before (渲染内圈)，幸运的是可以在 radio 类型的输入字段上使用:

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 radio type:

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;
}

工作演示.

这篇关于是否可以更改所选单选按钮中心圆的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！