Javascriptでチェックボックスの背景色を追加します

Question

私のプロジェクトでは、チェックボックスのチェックボックスの色付けに問題があります。 私は動的にチェックボックスを作成し、新しいものを作成するときには、そのチェックボックスに新しいランダムな色を付けたいと思います。 私は16進コードでランダムに生成された色を返す私の関数でそれらのボックスのスタイルを設定したいと思います。それは機能しますが、私を悩まし続ける唯一のことは、この新しい色を（＃16進形式で、 "#FFFFFF"のように）チェックボックスに適用する方法です。 私は別の品種を試しましたが、成功しませんでした。 Javascriptでこの問題を解決したいのですが。

私は、Googleカレンダーがチェックしなければならないと言うようなチェックボックスを表示したいと思います。どのカレンダーを表示したいのですか。

任意の提案ですか？

Answer 1

たぶん、あなたはこれを試みることができる：

必要な場所にCSSをカスタマイズしてください。

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

チェックボックスの背景色を設定することはできません。

可能な解決策は、CSSとHTMLラベルで「カスタム」チェックボックスを作成することです。

トリックはチェックボックスを非表示にすることです。チェックボックスのラベルは、スタイルを設定できる擬似要素::beforeを取得します。 チェックボックスがオンになっている場合（ラベルのために可能）、::before疑似要素のスタイルを更新します。

非常に基本的な例：

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

デモ：https://jsfiddle.net/j43djbsd/1/