Est-il possible de changer la couleur du cercle central du bouton radio sélectionné

Est-il possible de style le cercle central d'un bouton radio, au moins dans les navigateurs webkit...?

Ce que j'ai maintenant: Est-il possible de changer la couleur du cercle central du bouton radio sélectionné

Ce que je veux: Est-il possible de changer la couleur du cercle central du bouton radio sélectionné

Je peux changer la couleur de fond de l'ombre, etc comme suit

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

Toutes les idées..?

source d'informationauteur T J

  1. 29

    Vous pouvez imiter le bouton radio à l'aide de la série de la frontière truc (pour rendre le cercle extérieur) et le pseudo-élément :before (pour rendre le cercle intérieur), qui peut heureusement être utilisé sur un champ de saisie de radio type:

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

    Travail De Démonstration.

  2. 2

    Vous pouvez également appliquer une image de fond d'écran lorsque le bouton radio est coché

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

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