È possibile cambiare il colore del cerchio centrale del pulsante radio selezionato

Question

È possibile applicare lo stile al cerchio centrale di un pulsante di opzione selezionato, almeno nei browser Webkit ...?

Quello che ho adesso:

Quello che voglio:

posso cambiare il colore di sfondo, ombra, ecc come segue

#searchPopup input[type="radio"]{ 
    -webkit-appearance:none; 
    box-shadow: inset 1px 1px 1px #000000; 
    background:#fff; 
} 

#searchPopup input[type="radio"]:checked{ 
    -webkit-appearance:radio; 
    box-shadow: none; 
    background:rgb(252,252,252); 
} 

Tutte le idee ..?

Answer 1

È possibile simulare il pulsante radio utilizzando un trucco bordo circolare (per rendere il cerchio esterno) e lo pseudo-elemento :before (per rendere il cerchio interno) che può fortunatamente essere utilizzato su un campo di radio tipo:

input[type='radio'] { 
    -webkit-appearance:none; 
    width:20px; 
    height:20px; 
    border:1px solid darkgray; 
    border-radius:50%; 
    outline:none; 
    box-shadow:0 0 5px 0px gray inset; 
} 

input[type='radio']:hover { 
    box-shadow:0 0 5px 0px orange inset; 
} 

input[type='radio']:before { 
    content:''; 
    display:block; 
    width:60%; 
    height:60%; 
    margin: 20% auto;  
    border-radius:50%;  
} 
input[type='radio']:checked:before { 
    background:green; 
} 

Working Demo.

Answer 2

si potrebbe anche applicare uno sfondo-immagine quando il pulsante di opzione è selezionata

[type="radio"]:checked { 
    width: 16px; 
    height: 16px; 
    -webkit-appearance: none; 
    background-image: ... 
} 

Un esempio: http://jsfiddle.net/yZ6tM/

Answer 3

È possibile associare il pulsante di opzione all'etichetta, quindi è possibile nascondere il pulsante di opzione e l'etichetta di stile come desiderato. Example.

div { 
 
    background-color: #444444; 
 
    display: flex-column; 
 
    display:webkit-flex-column; 
 
} 
 
input { 
 
    margin: 10px; 
 
    position: absolute; 
 
    left: 100px; 
 
} 
 
label { 
 
    box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    margin: 10px; 
 
    display: block; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    background-color: #ffffff; 
 
    box-shadow: inset 1px 0 #000000; 
 
} 
 
#green { 
 
    border: 8px solid green; 
 
} 
 
#red { 
 
    border: 8px solid red; 
 
} 
 
input:checked + #green { 
 
    border: 8px solid #ffffff; 
 
    background-color:green !important; 
 
} 
 
input:checked + #red { 
 
    border: 8px solid #ffffff; 
 
    background-color: red !important; 
 
}

Click a button on the left - radio button on the right will be checked. 
 
<div> 
 
    <input id="greenInput" type="radio" name="someName"> 
 
    <label id="green" for="greenInput"> </label> 
 
    <input id="redInput" type="radio" name="someName"> 
 
    <label id="red" for="redInput"></label> 
 
</div>