Comment changer la couleur des boutons radio ?

Question

Je veux dire, un bouton radio lui-même se compose d'une forme ronde et d'un point au centre (lorsque le bouton est sélectionné). Ce que je veux changer, c'est la couleur des deux. Est-ce possible de le faire en utilisant CSS ?

Answer 1

Une solution rapide serait de superposer le style de l'input bouton radio en utilisant :after

    input[type='radio']:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #d1d3d1;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #ffa500;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

Answer 2

Un bouton radio est un élément natif spécifique à chaque système d'exploitation/navigateur. Il n'y a pas de moyen de changer sa couleur/style, à moins que vous ne vouliez implémenter des images personnalisées ou utiliser une bibliothèque Javascript personnalisée qui inclut des images (par exemple, ceci - lien archivé)

Answer 3

Comme Fred l'a mentionné, il n'y a aucun moyen de styliser nativement les boutons radio en ce qui concerne la couleur, la taille, etc. Mais vous pouvez utiliser des Pseudo-éléments CSS pour configurer un imposteur de n'importe quel bouton radio donné et le styliser. Touchant à ce que JamieD a dit, sur la façon dont nous pouvons utiliser l'élément Pseudo :after, vous pouvez utiliser à la fois :before et :after pour obtenir un aspect souhaitable.

Avantages de cette approche:

• Stylisez votre bouton radio et incluez également une étiquette pour le contenu.
• Changez la couleur du contour extérieur et/ou du cercle coché à n'importe quelle couleur de votre choix.
• Donnez-lui un aspect transparent avec des modifications à la propriété de couleur de fond et/ou à l'utilisation facultative de la propriété d'opacité.
• Redimensionnez la taille de votre bouton radio.
• Ajoutez différentes propriétés de ombre portée telles que l'ombre portée CSS encastrée là où nécessaire.
• Intégrez cette simple astuce CSS/HTML dans divers systèmes de grille, tels que Bootstrap 3.3.6, pour qu'elle s'harmonise visuellement avec le reste de vos composants Bootstrap.

Explication du court démo ci-dessous:

• Configurer un bloc en ligne relatif pour chaque bouton radio
• Masquer le bouton radio natif puisqu'il n'y a aucun moyen de le styliser directement.
• Styliser et aligner l'étiquette
• Reconstruction du contenu CSS sur l'élément Pseudo :before pour faire 2 choses - styliser le contour extérieur du bouton radio et définir l'élément pour apparaître en premier (à gauche du contenu de l'étiquette). Vous pouvez apprendre les étapes de base sur les Pseudo-éléments ici - http://www.w3schools.com/css/css_pseudo_elements.asp
• Si le bouton radio est coché, demandez à l'étiquette d'afficher le contenu CSS (le point stylisé dans le bouton radio) ensuite.

Le HTML

    Option 1

    Option 2

Le CSS

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-item label {
  color: #666;
  font-weight: normal;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
}

.radio-item input[type=radio]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 10px;
  content: " ";
  display: block;
  background: #004c97;
}

Un court démo pour le voir en action

En conclusion, pas besoin de JavaScript, d'images ou de batteries. Purement en CSS.

Answer 4

Seulement si vous ciblez les navigateurs basés sur Webkit (Chrome et Safari, peut-être que vous développez une Chrome WebApp, qui sait...), vous pouvez utiliser le suivant:

input[type='radio'] {
   -webkit-appearance: none;
}

Ensuite, stylisez-le comme s'il s'agissait d'un simple élément HTML, par exemple en appliquant une image de fond.

Utilisez input[type='radio']:active lorsque l'input est sélectionné, pour fournir des graphiques alternatifs

Mise à jour : À partir de 2018, vous pouvez ajouter le suivant pour prendre en charge plusieurs fournisseurs de navigateurs:

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Answer 5

Vous pouvez obtenir des boutons radio personnalisés de deux manières en CSS pur

1. En supprimant l'apparence standard à l'aide de CSS appearance et en appliquant une apparence personnalisée. Malheureusement, cela ne fonctionne pas dans IE. Démo:

   input[type="radio"] {
     /* supprimer l'apparence de fond standard */
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     /* créer une apparence personnalisée pour le bouton radio */
     display: inline-block;
     width: 25px;
     height: 25px;
     padding: 6px;
     /* couleur de fond uniquement pour le contenu */
     background-clip: content-box;
     border: 2px solid #bbbbbb;
     background-color: #e7e6e7;
     border-radius: 50%;
   }
   
   /* apparence pour le bouton radio sélectionné */
   input[type="radio"]:checked {
     background-color: #93e026;
   }
   
   /* styles facultatifs, je les utilise pour centrer les boutons radio */
   .flex {
     display: flex;
     align-items: center;
   }
   
     BoutonRadio1
   
     BoutonRadio2
   
     BoutonRadio3

2. En masquant le bouton radio et en définissant l'apparence personnalisée du bouton radio sur le pseudo-sélecteur de label. Au fait, pas besoin de positionnement absolu ici (je vois du positionnement absolu dans la plupart des démos). Démo:

   *,
   *:before,
   *:after {
     box-sizing: border-box;
   }
   
   input[type="radio"] {
     display: none;
   }
   
   input[type="radio"]+label:before {
     content: "";
     /* créer une apparence personnalisée pour le bouton radio */
     display: inline-block;
     width: 25px;
     height: 25px;
     padding: 6px;
     margin-right: 3px;
     /* couleur de fond uniquement pour le contenu */
     background-clip: content-box;
     border: 2px solid #bbbbbb;
     background-color: #e7e6e7;
     border-radius: 50%;
   }
   
   /* apparence pour le bouton radio sélectionné */
   input[type="radio"]:checked + label:before {
     background-color: #93e026;
   }
   
   /* styles facultatifs, je les utilise pour centrer les boutons radio */
   label {
     display: flex;
     align-items: center;
   }
   
   BoutonRadio1
   
   BoutonRadio2
   
   BoutonRadio3