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

Question

如何使单选按钮阴影在 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/

Answer 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 左侧带有圆形阴影的单选按钮

Radio Button with rounded shadow on left in Chrome

css

google-chrome

border

radio-button

box-shadow