Chrome左侧带有圆形阴影的单选按钮答案

【问题标题】：Radio Button with rounded shadow on left in ChromeChrome左侧带有圆形阴影的单选按钮
【发布时间】：2016-08-22 14:54:29
【问题描述】：

如何使单选按钮阴影在 Chrome 中像在 IE 中显示一样圆润？任何帮助将不胜感激！

IE：（像这样）

CHROME：（不是这样）

HTML：

<div class="radio"><input type="radio"><label>C#</label></div>    
<div class="radio"><input type="radio"><label>Java</label></div>

CSS

input[type="radio"] {
    box-shadow: -4px 0 0 maroon; 
    border-radius: 10px;
}

JS FIDDLE：

http://jsfiddle.net/nikib/b85zpgu5/

【问题讨论】：

好像是这样stackoverflow.com/questions/28140447/… 或许你可以用伪元素(:before, :after) 来做
@twxia。是的，我也看到了，但我无法让它工作。 jsfiddle.net/nikib/7sa8v16k。看起来罗伊的解决方案奏效了。感谢您的链接和提示。

标签： css google-chrome radio-button border box-shadow

【解决方案1】：

您可以更改输入元素的-webkit-appearance 属性以获取initial 或inherit。然后样式是根据您的需要。

input[type="radio"] {
  width:15px;
  height:15px;
  box-shadow: -4px 0 0 maroon; 
  border-radius: 999px;
  -webkit-appearance: inherit;
  border:1px solid #999999;
  position:relative;
  box-sizing:border-box;
}
input[type="radio"]:checked:before {
  content:"";
  position:absolute;
  border-radius: 999px;
  left:25%;
  top:25%;
  width:50%;
  height:50%;
  background:#999999;
}

更新Fiddle

【讨论】：

太棒了！我现在在 Chrome 和 IE 上都可以看到它。谢谢！