javascript - 使用 Javascript 将背景颜色添加到复选框框

Question

我在为项目中的复选框元素的复选框着色时遇到问题。我动态创建复选框，当我创建一个新复选框时，我想为其复选框赋予一种新的随机颜色。我想用我的函数来设置这些框的样式，该函数以十六进制代码返回随机生成的颜色。这可行，但唯一一直困扰我的是如何将这种新颜色(十六进制格式，例如:“#FFFFFF”)应用到复选框？我尝试了不同的品种，但没有成功。如果可能的话，我想用 Javascript 解决这个问题。

我想要那些复选框，比如 Google 日历必须检查您想要查看哪些日历。

有什么建议吗？

Answer 1

也许你可以试试这个:

请根据需要自定义 CSS。

$.fn.cbColor = function(color) {
	color = color || '#f00';
  
	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>