Radio Button mit abgerundeten Schatten auf der linken Seite in Chrome

Question

Wie mache ich den Radiobutton Schatten in Chrome wie in IE gerundet werden? Jede Hilfe wird geschätzt!

IE: (ähnliche)

CHROME: (nicht gefällt dieses)

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

könnten Sie die -webkit-appearance Eigenschaft des Eingangselements ändern initial oderzu erhalten. Dann ist Stil nach Ihrem Bedarf.

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

Aktualisiert Fiddle