Radio Button with rounded shadow on left in Chrome

Question

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: (like this)

CHROME: (not like this)

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

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