Caselle di controllo CSS Styling

Question

Ok, ho visto molte soluzioni per lo styling delle caselle di controllo tramite CSS sul web. Tuttavia, sto cercando qualcosa di leggermente più robusto, e mi chiedo se qualcuno possa aiutarti. Fondamentalmente, voglio avere this solution, ma con la possibilità di avere un colore specificato da CSS che sovrappone una casella di controllo grigia. Ho bisogno di questo perché avrò un numero imprevedibile di caselle di controllo diverse, ognuna delle quali richiede un colore diverso, e non voglio creare grandi quantità di immagini diverse per gestirle. Qualcuno ha qualche idea su come raggiungere questo obiettivo?

Answer 1

Ho creato un png trasparente, dove l'esterno è bianco e la casella di controllo è parzialmente trasparente. Ho modificato il codice per mettere un backgroundColor sull'elemento, e voilà !, una casella di controllo colorized.

http://i48.tinypic.com/raz13m.jpg (Si dice jpg, ma è un png).

Vorrei postare l'esempio, ma non conosco un buon modo per mostrarlo. Qualche buon sito sandbox là fuori?

Questo, ovviamente, dipende dal supporto png. Potresti farlo male con gif, o mettere un livello css semitrasparente sull'immagine, come hai suggerito, e quindi usare una maschera gif per mascherare il sanguinamento della scatola colorata. Questo metodo si basa sul supporto della trasparenza.

mio metodo png utilizza il css, js dalla pagina si è collegato al, con questi cambiamenti:

JS:

// Changed all instances of '== "styled"' to '.search(...)' 
    // to handle the additional classes needed for the colors (see CSS/HTML below) 
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) { 

    span[a] = document.createElement("span"); 

      // Added '+ ...' to this line to handle additional classes on the checkbox 
    span[a].className = inputs[a].type + inputs[a].className.replace(/^styled/, ""); 

CSS:

.checkbox, .radio { 
    width: 19px; 
    height: 25px; 
    padding: 0px; /* Removed padding to eliminate color bleeding around image 
     you could make the image wider on the right to get the padding back */ 
    background: url(checkbox2.png) no-repeat; 
    display: block; 
    clear: left; 
    float: left; 
} 

.green { 
    background-color: green; 
} 

.red { 
    background-color: red; 
} 

etc... 

HTML:

<p><input type="checkbox" name="1" class="styled green"/> (green)</p> 
<p><input type="checkbox" name="2" class="styled red" /> (red)</p> 
<p><input type="checkbox" name="3" class="styled purple" /> (purple)</p> 

Spero che m ha senso.

Edit:

Ecco un esempio jQuery che illustra il principio con caselle di controllo: la risposta di

http://jsfiddle.net/jtbowden/xP2Ns/

Answer 2

Sembra che tu lo sappia già, ma la soluzione che hai collegato sopra in realtà sostituisce la casella con un tag span con un'immagine per dare l'effetto di una casella di controllo "stile".

Per la maggior parte dei browser come IE e Firefox, ci sono poche (se ci sono) opzioni e pochissimo supporto per le caselle di stile con il solo CSS.

Answer 3

Jeff B su come modificare la detta soluzione è corretta. Ecco l'implementazione della sua modifica alla soluzione se qualcuno ha bisogno di copiare e incollare.

JavaScript http://pastebin.com/WFdKwdCt

CSS http://pastebin.com/TM1WwSQW

Answer 4

ho trovato http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ un javascript soluzione + css i thats opere su win cioè, vincere e Mac: Chrome, Safari, Firefox, Opera. iOS Safari e Chrome.