Come modificare lo stile della radio e l'input della casella di controllo

Question

Ho un sito Web in cui sto cercando di modificare il colore di sfondo del punto di un pulsante di opzione. In questo momento sembra essere trasparente, quindi ottiene il colore di qualunque sia lo sfondo. Ho provato ad usare i CSS e ad esempio impostare "background: white;", tuttavia ciò non ha alcun effetto nel browser. Qualche idea di trucchi interessanti da usare per raggiungere questo obiettivo?

La stessa domanda indica anche la casella di controllo.

Answer 1

jsBin demo

Questa tecnica utilizza l'elemento label legato a nascosto input elementi, che ricevono uno stato :checked modificheranno l'aspetto dello pseudo elemento

/* COMMON RADIO AND CHECKBOX STYLES */ 
 
input[type=radio], 
 
input[type=checkbox]{ 
 
    /* Hide original inputs */ 
 
    visibility: hidden; 
 
    position: absolute; 
 
} 
 
input[type=radio] + label:before, 
 
input[type=checkbox] + label:before{ 
 
    height:12px; 
 
    width:12px; 
 
    margin-right: 2px; 
 
    content: " "; 
 
    display:inline-block; 
 
    vertical-align: baseline; 
 
    border:1px solid #777; 
 
} 
 
input[type=radio]:checked + label:before, 
 
input[type=checkbox]:checked + label:before{ 
 
    background:gold; 
 
} 
 

 
/* CUSTOM RADIO AND CHECKBOX STYLES */ 
 
input[type=radio] + label:before{ 
 
    border-radius:50%; 
 
} 
 
input[type=checkbox] + label:before{ 
 
    border-radius:2px; 
 
}

<input type="radio" name="r" id="r1"><label for="r1">Radio 1</label> 
 
<input type="radio" name="r" id="r2"><label for="r2">Radio 2</label> 
 

 
<input type="checkbox" name="c1" id="c1"><label for="c1">Check 1</label> 
 
<input type="checkbox" name="c2" id="c2"><label for="c2">check 2</label>

Answer 2

È stato ben stabilito che non è possibile modificare ogni dettaglio nei controlli generati dal browser. Ad esempio il colore della freccia su un menu a discesa di selezione, il punto di una radio, ecc ...

È possibile creare i controlli personalizzati, utilizzare alcune librerie come l'interfaccia utente di JQuery o .... forse giocare intorno a un poco con css.

Ecco un esperimento per simulare un punto colorato su una radio, utilizzando :before pseudo elemento:

http://jsfiddle.net/bvtngh57/

input[type="radio"]:checked:before { 
    content: ""; 
    display: block; 
    position: relative; 
    top: 3px; 
    left: 3px; 
    width: 6px; 
    height: 6px; 
    border-radius: 50%; 
    background: red; 
} 

Risultato:

Answer 3

Il metodo preferito per styling degli elementi non-label delle checkbox e i pulsanti radio con CSS servono essenzialmente a sostituirli con immagini che rappresentano il loro stato corrente (deselezionate, spuntate, ecc.).

si veda questo articolo di Ryan Seddon: http://www.thecssninja.com/css/custom-inputs-using-css

Answer 4

Ci sono molti modi per fare questo, tutti coinvolgono per sbarazzarsi degli stili DOM dal momento che è impossibile farlo senza questi "trucchi". Ecco un esempio da Chris Coyier (basta leggere nella pagina, saltare il passaggio 1 e semplicemente preparare teh immagini e CSS)

/* 
    Hide the original radios and checkboxes 
    (but still accessible) 

    :not(#foo) > is a rule filter to block browsers 
       that don't support that selector from 
       applying rules they shouldn't 

*/ 
li:not(#foo) > fieldset > div > span > input[type='radio'], 
li:not(#foo) > fieldset > div > span > input[type='checkbox'] { 

    /* Hide the input, but have it still be clickable */ 
    opacity: 0; 

    float: left; 
    width: 18px; 
} 

li:not(#foo) > fieldset > div > span > input[type='radio'] + label, 
li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label { 
    margin: 0; 
    clear: none; 

    /* Left padding makes room for image */ 
    padding: 5px 0 4px 24px; 

    /* Make look clickable because they are */ 
    cursor: pointer; 

    background: url(off.png) left center no-repeat; 
} 

/* 
    Change from unchecked to checked graphic 
*/ 
li:not(#foo) > fieldset > div > span > input[type='radio']:checked + label { 
    background-image: url(radio.png); 
} 
li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label { 
    background-image: url(check.png); 
} 

Answer 5

Il browser stesso gestisce l'aspetto dei pulsanti di opzione e caselle di controllo, così come a tendina/seleziona. È comunque possibile nascondere i pulsanti di opzione, sostituirli con le immagini e quindi modificare la radio/verificare il valore utilizzando jQuery. Font Awesome (http://fortawesome.github.io/Font-Awesome/icons/) ha alcune icone interessanti che è possibile utilizzare per questo.

Here is a demo

<div> 
    Radio 1 - 
    <input type="radio" name="radio" class="radio" value="1" /> 
    <span class="red fa fa-circle-o"></span> 
</div> 
<div> 
    Radio 2 - 
    <input type="radio" name="radio" class="radio" value="2" /> 
    <span class="blue fa fa-circle-o"></span> 
</div> 

$('span.fa').on('click', function() { 
    $('span.fa').removeClass('fa fa-dot-circle-o').addClass('fa fa-circle-o'); 
    $(this).removeClass('fa-circle-o').addClass('fa-dot-circle-o'); 

    //Check corresponding hidden radio 
    $(this).prev('input.radio').prop('checked', true); 
}); 

Answer 6

È possibile lo stile pulsanti di opzione ionici usando i CSS solo.Controllare il violino:

https://jsfiddle.net/sreekanthjayan/0d9vj86k/

 <div> 
      <ion-radio class="radio radio-inline radio-gray" ng-model="choice" ng-value="'A'">iOS</ion-radio> 
      <ion-radio class="radio radio-inline radio-teal" ng-model="choice" ng-value="'B'">Android</ion-radio> 
      <ion-radio class="radio radio-inline radio-blue" ng-model="choice" ng-value="'C'">Windows Phone</ion-radio> 
    </div> 


.radio .radio-icon { 
    visibility: visible !important; 
} 

.radio .radio-icon:before { 
    content: "" !important; 
    border: 2px solid black !important; 
    width: 24px !important; 
    height: 24px !important; 
    border-radius: 50% !important; 
    overflow: hidden !important; 
} 

.radio .radio-icon:after { 
    content: "" !important; 
    position: absolute !important; 
    right: 20px !important; 
    top: 22px !important; 
    background: black !important; 
    width: 12px !important; 
    height: 12px !important; 
    border-radius: 50% !important; 
    overflow: hidden !important; 
    transition: -webkit-transform .28s cubic-bezier(0.420, 0.000, 0.000, 1.650); 
    transition: transform .28s cubic-bezier(0.420, 0.000, 0.000, 1.650); 
    -webkit-transform: scale(0); 
    transform: scale(0); 
} 

.radio.item-radio > input[type=radio]:checked ~ .radio-icon:after { 
    -webkit-transform: scale(1); 
    transform: scale(1); 
} 

.radio .item-content { 
    background-color: #fff; 
    margin: 0; 
    padding-right: 50px; 
    padding-left: 0px; 
} 

.radio.item-radio > input[type=radio]:checked ~ .item-content { 
    background-color: #fff; 
} 

.radio-inline.item { 
    display: inline-block; 
    border: none; 
    margin: 0; 
    height: 50px; 
} 

.radio-blue .radio-icon:after { 
    background: #2196F3 !important; 
} 

.radio-blue .radio-icon:before { 
    border-color: #2196F3 !important; 
} 

.radio-teal .radio-icon:after { 
    background: #009688 !important; 
} 

.radio-teal .radio-icon:before { 
    border-color: #009688 !important; 
} 

.radio-gray .radio-icon:after { 
    background: #B6B6B6 !important; 
} 

.radio-gray .radio-icon:before { 
    border-color: #B6B6B6 !important; 
}