CSS Styling Checkboxen

Question

Okay, ich habe viele Lösungen für das Ankreuzen von CSS im Web gesehen. Ich suche jedoch etwas etwas robusteres, und ich frage mich, ob jemand helfen kann. Grundsätzlich möchte ich this solution haben, aber mit der Möglichkeit, eine CSS-spezifizierte Farbe über ein graues Kontrollkästchen zu legen. Ich brauche das, weil ich unvorhersehbare Anzahlen von verschiedenen Checkboxen haben werde, von denen jede eine andere Farbe benötigt, und ich möchte keine großen Mengen von verschiedenen Bildern erstellen, um damit umzugehen. Hat jemand Ideen, wie das geht?

Answer 1

Ich habe ein transparentes PNG erstellt, wobei die Außenseite weiß ist und das Kontrollkästchen teilweise transparent ist. Ich änderte den Code, um eine backgroundColor auf das Element zu setzen, und voila !, ein koloriertes Kontrollkästchen.

http://i48.tinypic.com/raz13m.jpg (Es sagt jpg, aber es ist ein png).

Ich würde das Beispiel veröffentlichen, aber ich kenne keine gute Möglichkeit, es zu zeigen. Irgendwelche guten Sandbox-Seiten da draußen?

Dies hängt natürlich von Png-Unterstützung ab. Sie könnten dies schlecht mit gif machen, oder eine halbtransparente CSS-Schicht über das Bild legen, wie Sie es vorgeschlagen haben, und dann eine GIF-Maske verwenden, um das Ausbluten der farbigen Box auszublenden. Diese Methode setzt Transparenzunterstützung voraus.

Meine png-Methode verwendet die CSS, JS von der Seite, die Sie verbunden sind, mit diesen Veränderungen:

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> 

Hoffe, dass m Akes Sinn.

Edit:

Hier ist ein jQuery Beispiel, das das Prinzip mit Kontrollkästchen zeigt:

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

Answer 2

Es hört sich so an, als ob Sie das bereits wissen, aber die Lösung, die Sie oben verlinkt haben, ersetzt das Kontrollkästchen mit einem span-Tag mit einem Bild, um den Effekt eines "gestylt" -Kontrollkästchens zu erhalten.

Für die meisten Browser wie IE und Firefox gibt es nur wenige (wenn überhaupt) Optionen und wenig Unterstützung für das Ankreuzen von Kästchen mit CSS allein.

Answer 3

Jeff B Antwort auf, wie die genannte Lösung bearbeiten korrekt ist. Hier ist die Implementierung seiner Bearbeitung für die Lösung, wenn jemand kopieren und einfügen muss.

JavaScript http://pastebin.com/WFdKwdCt

CSS http://pastebin.com/TM1WwSQW

Answer 4

I http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ eine Javascript + CSS-Lösung das ist, funktioniert auf Sieg also gefunden haben, gewinnen und Mac: Chrome, Safari, Firefox, Opera. iOS Safari und Chrom.