Comment changer la couleur des boutons radio?

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. Cela peut-il être fait en utilisant CSS?

Un bouton radio est un élément natif spécifique à chaque OS / navigateur. Il n'y a aucun moyen de changer sa couleur / style, à moins que vous souhaitez mettre en œuvre des images personnalisées ou utiliser une bibliothèque personnalisée Javascript qui comprend des images (par exemple , ce - lien en cache )

Une solution rapide serait de superposer le style de saisie des boutons radio à l'aide :after, mais il est probablement préférable de créer votre propre boîte à outils personnalisée.

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

<input type='radio' name="gender"/>
<input type='radio' name="gender"/>

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 éléments CSS Pseudo pour configurer un imposteur de n'importe quel bouton radio donné et le styliser. En ce qui concerne ce que JamieD a dit, sur la façon dont nous pouvons utiliser l'élément: after Pseudo, vous pouvez utiliser à la fois: before et: after pour obtenir un look souhaitable.

Avantages de cette approche:

• Donnez un style à votre bouton radio et incluez également une étiquette pour le contenu.
• Changez la couleur de la jante extérieure et / ou le cercle coché en n'importe quelle couleur que vous aimez.
• Donnez-lui un aspect transparent avec des modifications de la propriété de couleur d'arrière-plan et / ou une utilisation facultative de la propriété opacity.
• Mettez à l'échelle la taille de votre bouton radio.
• Ajoutez diverses propriétés d'ombre portée telles que l'insert d'ombre portée CSS si nécessaire.
• Mélangez cette simple astuce CSS / HTML dans divers systèmes de grille, tels que Bootstrap 3.3.6, afin qu'elle corresponde visuellement au reste de vos composants Bootstrap.

Explication de la courte démo ci-dessous:

• Configurer un bloc en ligne relatif pour chaque bouton radio
• Masquer le sens du bouton radio natif, il n'y a aucun moyen de le styliser directement.
• Style et alignement de l'étiquette
• Reconstruire le contenu CSS sur le pseudo-élément: before pour faire 2 choses - stylisez le bord extérieur du bouton radio et définissez l'élément pour qu'il apparaisse 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 ensuite à l'étiquette d'afficher le contenu CSS (le point stylisé dans le bouton radio).

Le HTML

<div class="radio-item">
    <input type="radio" id="ritema" name="ritem" value="ropt1">
    <label for="ritema">Option 1</label>
</div>

<div class="radio-item">
    <input type="radio" id="ritemb" name="ritem" value="ropt2">
    <label for="ritemb">Option 2</label>
</div>

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

Une courte démo pour le voir en action

En conclusion, pas de JavaScript, d'images ou de piles nécessaires. CSS pur.

Uniquement si vous ciblez des navigateurs basés sur des kits Web (Chrome et Safari, peut-être développez-vous une Chrome WebApp, qui sait ...), vous pouvez utiliser les éléments suivants:

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

Et puis stylisez-le comme s'il s'agissait d'un simple élément HTML, par exemple en appliquant une image d'arrière-plan.

À utiliser input[type='radio']:activelorsque l'entrée est sélectionnée, pour fournir les graphiques alternatifs

Mise à jour : à partir de 2018, vous pouvez ajouter les éléments suivants pour prendre en charge plusieurs fournisseurs de navigateurs:

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

Vous pouvez créer des boutons radio personnalisés de deux manières CSS pures

1. En supprimant l'apparence standard à l'aide de CSS appearanceet en appliquant une apparence personnalisée. Malheureusement, cela ne fonctionne pas dans IE for Desktop (mais fonctionne dans IE pour Windows Phone). Démo:

   input[type="radio"] {
     /* remove standard background appearance */
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     /* create custom radiobutton appearance */
     display: inline-block;
     width: 25px;
     height: 25px;
     padding: 6px;
     /* background-color only for content */
     background-clip: content-box;
     border: 2px solid #bbbbbb;
     background-color: #e7e6e7;
     border-radius: 50%;
   }
   
   /* appearance for checked radiobutton */
   input[type="radio"]:checked {
     background-color: #93e026;
   }
   
   /* optional styles, I'm using this for centering radiobuttons */
   .flex {
     display: flex;
     align-items: center;
   }

   <div class="flex">
     <input type="radio" name="radio" id="radio1" />
     <label for="radio1">RadioButton1</label>
   </div>
   <div class="flex">
     <input type="radio" name="radio" id="radio2" />
     <label for="radio2">RadioButton2</label>
   </div>
   <div class="flex">
     <input type="radio" name="radio" id="radio3" />
     <label for="radio3">RadioButton3</label>
   </div>

   Exécuter l'extrait de codeMasquer les résultats

   Développer l'extrait

2. En masquant le bouton radio et en définissant l'apparence du bouton radio personnalisé sur le pseudosélecteur de label. D'ailleurs pas besoin de positionnement absolu ici (je vois un 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: "";
     /* create custom radiobutton appearance */
     display: inline-block;
     width: 25px;
     height: 25px;
     padding: 6px;
     margin-right: 3px;
     /* background-color only for content */
     background-clip: content-box;
     border: 2px solid #bbbbbb;
     background-color: #e7e6e7;
     border-radius: 50%;
   }
   
   /* appearance for checked radiobutton */
   input[type="radio"]:checked + label:before {
     background-color: #93e026;
   }
   
   /* optional styles, I'm using this for centering radiobuttons */
   label {
     display: flex;
     align-items: center;
   }

   <input type="radio" name="radio" id="radio1" />
   <label for="radio1">RadioButton1</label>
   <input type="radio" name="radio" id="radio2" />
   <label for="radio2">RadioButton2</label>
   <input type="radio" name="radio" id="radio3" />
   <label for="radio3">RadioButton3</label>

   Exécuter l'extrait de codeMasquer les résultats

   Développer l'extrait

vous pouvez utiliser la case à cocher hack comme expliqué dans les astuces css

http://css-tricks.com/the-checkbox-hack/

exemple de travail de bouton radio:

http://codepen.io/Angelata/pen/Eypnq

input[type=radio]:checked ~ .check {}
input[type=radio]:checked ~ .check .inside{}

Fonctionne dans IE9 +, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome n'importe quoi.

exemple de bouton radio personnalisé simple de navigateur croisé pour vous

.checkbox input{
    display: none;
}
.checkbox input:checked + label{
    color: #16B67F;
}
.checkbox input:checked + label i{
    background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg');
}
.checkbox label i{
    width: 15px;
    height: 15px;
    display: inline-block;
    background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%;
    background-size: 12px;
    position: relative;
    top: 1px;
    left: -2px;
}

<div class="checkbox">
  <input type="radio" name="sort" value="popularity" id="sort1">
  <label for="sort1">
        <i></i>
        <span>first</span>
    </label>

  <input type="radio" name="sort" value="price" id="sort2">
  <label for="sort2">
        <i></i>
        <span>second</span>
    </label>
</div>

https://jsfiddle.net/kuzroman/ae1b34ay/

Eh bien, pour créer des éléments supplémentaires, nous pouvons utiliser: after,: before (donc nous n'avons pas à changer trop le HTML). Ensuite, pour les boutons radio et les cases à cocher, nous pouvons utiliser: coché. Il y a quelques autres pseudo éléments que nous pouvons également utiliser (tels que: hover). En utilisant un mélange de ceux-ci, nous pouvons créer des formulaires personnalisés assez sympas. vérifie ça

J'ai construit un autre fork de l' exemple de code de @ klewis pour montrer que jouer avec du CSS pur et des dégradés en utilisant: before /: after pseudo éléments et un bouton d'entrée radio caché.

HTML:

sample radio buttons:
<div style="background:lightgrey;">
    <span class="radio-item">
        <input type="radio" id="ritema" name="ritem" class="true" value="ropt1" checked="checked">
        <label for="ritema">True</label>
    </span>

    <span class="radio-item">
        <input type="radio" id="ritemb" name="ritem" class="false" value="ropt2">
        <label for="ritemb">False</label>
    </span>
</div>

:

CSS:

.radio-item input[type='radio'] {
    visibility: hidden;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 5px;
    padding: 0;
}
    .radio-item input[type=radio]:before {
        position: relative;
        margin: 4px -25px -4px 0;
        display: inline-block;
        visibility: visible;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        border: 2px inset rgba(150,150,150,0.75);
        background: radial-gradient(ellipse at top left, rgb(255,255,255) 0%, rgb(250,250,250) 5%, rgb(230,230,230) 95%, rgb(225,225,225) 100%);
        content: "";
    }
        .radio-item input[type=radio]:checked:after {
            position: relative;
            top: 0;
            left: 9px;
            display: inline-block;
            visibility: visible;
            border-radius: 6px;
            width: 12px;
            height: 12px;
            background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
            content: "";
        }
            .radio-item input[type=radio].true:checked:after {
                background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
            }
            .radio-item input[type=radio].false:checked:after {
                background: radial-gradient(ellipse at top left, rgb(255,225,200) 0%, rgb(250,200,150) 5%, rgb(200,25,0) 95%, rgb(100,25,0) 100%);
            }
.radio-item label {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    margin: 0;
    padding: 0;
}

aperçu: https://www.codeply.com/p/y47T4ylfib

Essayez ce css avec transition:

Démo

$DarkBrown: #292321;

$Orange: #CC3300;

div {
  margin:0 0 0.75em 0;
}

input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    color: $DarkBrown;
    font-family:Arial, sans-serif;
    font-size:14px;
}
input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}

input[type="radio"] + label span {
     background-color:$DarkBrown;
}

input[type="radio"]:checked + label span{
     background-color:$Orange;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

Html:

<div>
  <input type="radio" id="radio01" name="radio" />
  <label for="radio01"><span></span>Radio Button 1</label>
</div>

<div>
 <input type="radio" id="radio02" name="radio" />
 <label for="radio02"><span></span>Radio Button 2</label>
</div>

Ce n'est pas possible avec le CSS natif. Vous devrez utiliser des images d'arrière-plan et quelques astuces javascript.

Comme d'autres l'ont dit, il n'y a aucun moyen d'y parvenir dans tous les navigateurs, donc la meilleure façon de le faire crossbrowser consiste à utiliser javascript de manière discrète. En gros, vous devez transformer votre radiobutton en liens (entièrement personnalisables via CSS). chaque clic sur le lien sera lié à la radiobox associée, basculant son état et tous les autres.

Il peut être utile de lier le bouton radio à une étiquette stylée. Plus de détails dans cette réponse .

Une façon intelligente de le faire serait de créer un div séparé avec une hauteur et une largeur de -par exemple- 50px, puis un rayon de 50px posez-le sur vos boutons radio ...

Vous pouvez intégrer un élément span dans l'entrée radio puis sélectionner une couleur de votre choix à rendre lorsqu'une entrée radio est cochée. Consultez l'exemple ci-dessous provenant de w3schools.

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00a80e;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
</style>
<body>

<h1>Custom Radio Buttons</h1>
<label class="container">One
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

</body>

Changer la couleur d'arrière-plan de ce segment de code ci-dessous fait l'affaire.

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00a80e;
}

Provenant de la création d'un bouton radio personnalisé

Une solution simple serait d'utiliser la propriété CSS suivante.

input[type=radio]:checked{
    background: \*colour*\;
    border-radius: 15px;
    border: 4px solid #dfdfdf;
}