Ist es möglich, ändern Sie die Farbe des ausgewählten radio-Buttons-center-Kreis

Ist es möglich, Stil der Kreis in der Mitte des ausgewählten radio-button, zumindest in webkit-Browsern...?

Was ich jetzt habe:

Was ich will:

Kann ich den hintergrund ändern, Farbe, Schatten etc wie folgt

#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..?

InformationsquelleAutor der Frage T J | 2014-04-19

Können Sie imitieren den radio-button mit der einige Runden Grenze trick (zum Rendern der äußere Kreis) und das pseudo-element :before (zum Rendern der innere Kreis), die zum Glück genutzt werden, die auf ein input-Feld radio Typ:

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

Arbeiten Demo.

InformationsquelleAutor der Antwort King King

2

Könnten Sie auch einen hintergrund-Bild wenn das Optionsfeld aktiviert ist
```
[type="radio"]:checked {
    width: 16px;
    height: 16px;
    -webkit-appearance: none;
    background-image:  ...
}
```
Beispiel: http://jsfiddle.net/yZ6tM/

InformationsquelleAutor der Antwort Vangel Tzo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.