Ist es möglich, die Farbe des mittleren Kreises des ausgewählten Radiobuttons zu ändern?

Question

Ist es möglich, den mittleren Kreis eines ausgewählten Radiobuttons zu gestalten, zumindest in Webkit-Browsern ...?

Was ich jetzt habe:

Was ich will:

Ich kann die Hintergrundfarbe ändern, Schatten usw. als

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

Irgendwelche Ideen folgt ..?

Answer 1

Sie können die Radiotaste etwas runden Rand Trick nachahmen und das pseudo-Element (den äußeren Kreis zu machen) :before (den inneren Kreis zu machen), die glücklicherweise auf einem Eingabefeld des radio Typs verwendet werden kann:

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

Sie könnten auch ein Hintergrund-Bild anwenden, wenn das Optionsfeld aktiviert ist

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

Ein Beispiel: http://jsfiddle.net/yZ6tM/

Answer 3

Sie können Radio-Button an Label binden, dann können Sie Radio-Button und Style-Label ausblenden, was auch immer Sie mögen. 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>