Chrome中左侧带有圆形阴影的单选按钮 [英] Radio Button with rounded shadow on left in Chrome

问题描述

如何在Chrome中像在IE中那样使单选按钮阴影四舍五入?任何帮助将不胜感激！

How do I make the radio button shadow to be rounded in Chrome like how it is displayed in IE? Any help will be appreciated!

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/

推荐答案

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

You could change the -webkit-appearance property of the input element to get initial or inherit. Then style is according to your need.

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

更新了 小提琴

Updated Fiddle

这篇关于Chrome中左侧带有圆形阴影的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！