Come cambio il colore dei pulsanti di opzione?

Voglio dire, un pulsante di opzione stesso è costituito da una forma rotonda e un punto al centro (quando il pulsante è selezionato). Quello che voglio cambiare è il colore di entrambi. Può essere fatto usando CSS?

Un pulsante di opzione è un elemento nativo specifico per ogni sistema operativo / browser. Non c'è modo di cambiarne il colore / stile, a meno che non si desideri implementare immagini personalizzate o utilizzare una libreria Javascript personalizzata che include immagini (ad esempio questo - collegamento memorizzato nella cache )

Una soluzione rapida sarebbe quella di sovrapporre lo stile di input del pulsante di opzione utilizzando :after, tuttavia è probabilmente una pratica migliore creare il proprio toolkit personalizzato.

    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"/>

Come ha detto Fred, non c'è modo di personalizzare i pulsanti di opzione in modo nativo per quanto riguarda il colore, le dimensioni, ecc. Ma puoi usare gli pseudo elementi CSS per impostare un impostore di un dato pulsante di opzione e definirlo. Toccando ciò che ha detto JamieD, su come possiamo usare l'elemento: after Pseudo, puoi usare entrambi: before e: after per ottenere un aspetto desiderabile.

Vantaggi di questo approccio:

• Definisci lo stile del pulsante di opzione e includi anche un'etichetta per il contenuto.
• Cambia il colore del bordo esterno e / o il cerchio a scacchi con il colore che preferisci.
• Dategli un aspetto trasparente con modifiche alla proprietà del colore di sfondo e / o l'uso opzionale della proprietà di opacità.
• Ridimensiona le dimensioni del pulsante di opzione.
• Aggiungi varie proprietà dell'ombra discendente, come l'inserto dell'ombra discendente CSS, dove necessario.
• Unisci questo semplice trucco CSS / HTML in vari sistemi Grid, come Bootstrap 3.3.6, in modo che corrisponda visivamente al resto dei tuoi componenti Bootstrap.

Spiegazione della breve demo di seguito:

• Imposta un blocco in linea relativo per ogni pulsante di opzione
• Nascondi il senso del pulsante di opzione nativo non c'è modo di modellarlo direttamente.
• Stile e allinea l'etichetta
• Ricostruire il contenuto CSS sullo pseudo-elemento: before per fare 2 cose: applicare uno stile al bordo esterno del pulsante di opzione e impostare l'elemento in modo che appaia per primo (a sinistra del contenuto dell'etichetta). Puoi imparare i passaggi di base sugli pseudo-elementi qui - http://www.w3schools.com/css/css_pseudo_elements.asp
• Se il pulsante di opzione è selezionato, richiedere all'etichetta di visualizzare il contenuto CSS (il punto con lo stile nel pulsante di opzione) in seguito.

Il codice 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>

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

Una breve demo per vederlo in azione

In conclusione, non sono necessari JavaScript, immagini o batterie. CSS puro.

Solo se stai prendendo di mira browser basati su webkit (Chrome e Safari, forse stai sviluppando una Chrome WebApp, chissà ...), puoi usare quanto segue:

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

E poi modellalo come se fosse un semplice elemento HTML, ad esempio applicando un'immagine di sfondo.

Utilizzare input[type='radio']:activeper quando è selezionato l'ingresso, per fornire la grafica alternativa

Aggiornamento : a partire dal 2018 è possibile aggiungere quanto segue per supportare più fornitori di browser:

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

Puoi ottenere pulsanti di opzione personalizzati in due modi CSS puri

1. Rimuovendo l'aspetto standard utilizzando CSS appearancee applicando l'aspetto personalizzato. Sfortunatamente questo non funziona in IE per Desktop (ma funziona in IE per Windows Phone). demo:

   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>

   Esegui snippet di codiceNascondi risultati

   Espandi lo snippet

2. Nascondendo il radiobutton e impostando l'aspetto personalizzato del radiobutton sullo labelpseudoselettore di. A proposito, non è necessario il posizionamento assoluto qui (vedo il posizionamento assoluto nella maggior parte delle demo). demo:

   *,
   *: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>

   Esegui snippet di codiceNascondi risultati

   Espandi lo snippet

puoi usare il checkbox hack come spiegato nei trucchi CSS

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

esempio funzionante di pulsante di opzione:

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

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

Funziona in IE9 +, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome qualsiasi cosa.

semplice esempio di pulsante di opzione personalizzato cross browser per te

.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/

Bene, per creare elementi extra possiamo usare: after,: before (quindi non dobbiamo cambiare molto l'HTML). Quindi per i pulsanti di opzione e le caselle di controllo possiamo usare: selezionato. Ci sono anche alcuni altri pseudo elementi che possiamo usare (come: hover). Usando una combinazione di questi possiamo creare dei moduli personalizzati piuttosto interessanti. controllare questo

Prova questo CSS con transizione:

dimostrazione

$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>

Ho creato un altro fork del codice di esempio di @ klewis per dimostrare come giocare con css e gradienti puri usando: before /: after pseudo elementi e un pulsante di input radio nascosto.

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

anteprima: https://www.codeply.com/p/y47T4ylfib

Questo non è possibile con il CSS nativo. Dovrai usare immagini di sfondo e alcuni trucchi javascript.

Come altri hanno detto, non c'è modo di ottenere questo risultato in tutti i browser, quindi il modo migliore per farlo crossbrowser è usare javascript in modo discreto. Fondamentalmente devi trasformare il tuo radiobutton in link (completamente personalizzabili tramite CSS). ogni clic sul link sarà vincolato al relativo radiobox, alternando il suo stato e tutti gli altri.

Può essere utile associare il pulsante di opzione all'etichetta con stile. Ulteriori dettagli in questa risposta .

Un modo intelligente per farlo sarebbe creare un div separato con un'altezza e una larghezza di -per esempio- 50px e poi un raggio di 50px posizionarlo sui pulsanti di opzione ...

È possibile incorporare un elemento span nell'ingresso radio, quindi selezionare un colore di propria scelta per il rendering quando viene selezionato un ingresso radio. Guarda l'esempio qui sotto proveniente da 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>

Cambiare il colore di sfondo in questo segmento di codice sotto fa il trucco.

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

Provenienti da come creare un pulsante di opzione personalizzato

Una soluzione semplice sarebbe utilizzare la seguente proprietà CSS.

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