Fügen Sie eine Hintergrundfarbe zu Kontrollkästchen mit Javascript

Question

Ich habe ein Problem mit der Färbung der Kontrollkästchen des Kontrollkästchens Element in meinem Projekt. Ich erstelle Kontrollkästchen dynamisch und wenn ich ein neues erstelle, möchte ich sein Kontrollkästchen eine neue zufällige Farbe geben. Ich möchte diese Felder mit meiner Funktion, die die zufällig generierte Farbe in Hex-Code zurückgibt, stylen. Das funktioniert, aber das einzige, was mich stört, ist, wie man diese neue Farbe (im Hex-Format wie "#FFFFFF") auf die Checkbox anwendet? Ich versuchte es mit verschiedenen Sorten, endete aber ohne Erfolg. Ich möchte dieses Problem mit Javascript lösen, wenn es möglich ist.

Ich hätte gerne diese Checkboxen wie Google Kalender sagen, welche Kalender Sie sehen möchten.

Irgendwelche Vorschläge?

Answer 1

Vielleicht könnten Sie dies versuchen:

Bitte CSS anpassen, wo nötig.

$.fn.cbColor = function(color) { 
 
\t color = color || '#f00'; 
 
    
 
\t this 
 
    .addClass('cb') 
 
    .before('<div class="cb-box" style="background:' + color + ';"></div>'); 
 
    
 
    return this; 
 
}; 
 

 
// Apply color to existing checkboxes 
 
$(':checkbox').cbColor('#fd0'); 
 

 
$('#container').append('<br>'); 
 

 
// Apply color for dynamic elements 
 
var $newCb = $('<input id="custom"type="checkbox">'), 
 
$newCb2 = $('<input id="custom2"type="checkbox">'); 
 

 
$newCb 
 
.appendTo('#container') 
 
.after('<label for="custom">custom</label><br>') 
 
.cbColor('#fdf'); 
 

 
$newCb2 
 
.appendTo('#container') 
 
.after('<label for="custom2">custom2</label><br>') 
 
.cbColor('#f00');

.cb { 
 
    display: none; 
 
} 
 

 
.cb-box { 
 
    width: 14px; 
 
    height: 14px; 
 
    display: inline-block; 
 
} 
 

 
.cb + label::before { 
 
    content: '\0000a0'; 
 
    margin-right: 0px; 
 
} 
 

 
.cb:checked + label::before { 
 
    content: '\2714'; 
 
    margin-left: -12px; 
 
    margin-right: 6px; 
 
    font-size: 12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <input id="cb1" type="checkbox"><label for="cb1">1</label><br> 
 
    <input id="cb2" type="checkbox"><label for="cb2">2</label><br> 
 
    <input id="cb3" type="checkbox"><label for="cb3">3</label><br> 
 
    <input id="cb4" type="checkbox"><label for="cb4">4</label><br> 
 
    <input id="cb5" type="checkbox"><label for="cb5">5</label><br> 
 
    <input id="cb6" type="checkbox"><label for="cb6">6</label><br> 
 
    <input id="cb7" type="checkbox"><label for="cb7">7</label><br> 
 
    <input id="cb8" type="checkbox"><label for="cb8">8</label><br> 
 
    <input id="cb9" type="checkbox"><label for="cb9">9</label> 
 
</div>

Answer 2

Sie können die Hintergrundfarbe eines Kontrollkästchens nicht festlegen.

Eine mögliche Lösung besteht darin, ein "benutzerdefiniertes" Kontrollkästchen mit CSS und einem HTML-Label zu erstellen.

Der Trick ist, das Kontrollkästchen auszublenden. Das Label für das Kontrollkästchen erhält ein ::before Pseudo-Element, das Sie stylen können. Jetzt, wenn das Kontrollkästchen aktiviert ist (was aufgrund der Bezeichnung möglich ist), aktualisieren Sie den Stil des ::before Pseudoelements.

Ein sehr einfaches Beispiel:

.custom-cb { 
    position: absolute; 
    overflow: hidden; 
    width: 1px; 
    height: 1px; 
    margin: -1px; 
    padding: 0; 
    border: none; 
    clip: rect(0 0 0 0); 
} 

.custom-cb + label::before { 
    content: ''; 
    width: 10px; 
    height: 10px; 
    margin-right: 5px; 

    display: inline-block;; 
    background: crimson; 
} 

.custom-cb:checked + label::before { 
    background: #2BED14; 
} 

Demo: https://jsfiddle.net/j43djbsd/1/