web-dev-qa-db-fra.com

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? 

htmlcssformsradio-button
62
catandmouse

Un bouton radio est un élément natif spécifique à chaque système d'exploitation/navigateur. Il n’est pas possible de changer sa couleur/son style, sauf si vous souhaitez implémenter des images personnalisées ou utiliser une bibliothèque Javascript personnalisée comprenant des images (par exemple, this - lien en cache ).

53
Fred

Une solution rapide consisterait à superposer le style de saisie du bouton radio à l'aide de :after. Cependant, 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"/>

60
JamieD

Only Si vous ciblez des navigateurs Webkit (Chrome et Safari, vous développez peut-être une application Web Chrome, qui sait ...), vous pouvez utiliser les éléments suivants:

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

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

Utilisez input[type='radio']:active lorsque l'entrée est sélectionnée pour fournir les graphiques de remplacement.

Mise à jour : À compter 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;
}
29
Omiod

Comme Fred l'a mentionné, il n'y a aucun moyen de créer de manière native des boutons radio en ce qui concerne la couleur, la taille, etc. Mais vous pouvez utiliser des pseudo-éléments CSS pour configurer un imposteur d'un bouton radio donné et le styler. En ce qui concerne ce que JamieD a dit, sur la façon dont nous pouvons utiliser le pseudo-élément: after, vous pouvez utiliser à la fois: before et: after pour obtenir un aspect recherché.

Avantages de cette approche:

  • Style de votre bouton radio et également inclure une étiquette pour le contenu.
  • Changez la couleur de la jante extérieure et/ou le cercle en cochant la couleur de votre choix.
  • Donnez-lui un aspect transparent en apportant des modifications à la propriété de couleur d'arrière-plan et/ou une utilisation facultative de la propriété d'opacité.
  • É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, le cas échéant.
  • Mélangez cette astuce CSS/HTML simple dans différents systèmes de grille, tels que Bootstrap 3.3.6, pour qu'elle corresponde visuellement au reste de vos composants Bootstrap.

Explication de la courte démonstration ci-dessous:

  • Configurez un bloc en ligne relatif pour chaque bouton radio
  • Cachez le sens du bouton radio natif, il n’ya aucun moyen de le styler directement.
  • Style et aligner l'étiquette
  • Reconstruire le contenu CSS sur le pseudo-élément: before de faire 2 choses - stylisez le bord extérieur du bouton radio et définissez l'élément pour apparaître en premier (à gauche du contenu de l'étiquette). Vous pouvez apprendre les étapes de base des 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 stylé du 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;
}

A courte démo pour le voir en action

En conclusion, aucun JavaScript, images ou batteries requis. CSS pur.

23
klewis

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

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

exemple de travail du 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, etc.

9
Amit Choukroun

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

  1. En supprimant l'apparence standard à l'aide de CSS appearance et en appliquant une apparence personnalisée. Malheureusement, cela ne fonctionnait pas dans IE pour Desktop (mais 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>

  2. En masquant le radiobutton et en définissant l'aspect du radiobutton personnalisé sur le pseudosélecteur de label Au fait, pas besoin de positionnement absolu ici (je vois le 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>

6
Vadim Ovchinnikov

exemple de bouton radio personnalisé simple navigateur multi-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/

5
kuzroman

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

4
GkDreamz

Comme cela a déjà été dit, il n’existe aucun moyen d’y parvenir dans tous les navigateurs. Le meilleur moyen de le faire est que crossbrowser utilise 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, en basculant son état et tous les autres. 

1
fcalderan

Essayez ce css avec transition:

 enter image description here

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>
1
Ahmad Aghazadeh

Vous aurez aussi besoin de javascript. Voir ici par exemple.

1
kgiannakakis

Ce n'est pas possible par CSS natif. Vous devrez utiliser des images de fond et quelques astuces javascript.

1
joni

Il peut être utile de lier radio-button à une étiquette de style. Plus de détails dans cette réponse .

0
snowerest

Un moyen astucieux de le faire serait de créer un div séparé avec une hauteur et une largeur de 50px, par exemple, puis un rayon de 50px par dessus vos boutons radio ...

0
Issmeil EL.