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

Question

我在项目中复选框元素的复选框着色时出现问题。 我动态创建复选框，当我创建一个新复选框时，我想给它的复选框一个新的随机颜色。 我想用我的函数设置这些框的样式，它以十六进制代码返回随机生成的颜色。这是有效的，但唯一一直困扰我的是，如何将这种新颜色（十六进制格式，如：“#FFFFFF”）应用于复选框？ 我试过不同的品种，但最终没有成功。如果可能，我想用Javascript解决这个问题。

我希望这些复选框可以说Google日历必须检查，您希望查看哪些日历。

有什么建议吗？

Answer 1

您无法设置复选框的背景颜色。

一种可能的解决方案是使用CSS和HTML标签创建一个“自定义”复选框。

诀窍是隐藏复选框。复选框的标签会获得一个::before psuedo元素，您可以设置该样式。 现在，当选中该复选框时（由于标签而可能），您将更新::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/

Answer 2

也许你可以试试这个：

请在需要时自定义CSS。

＆＃13;

＆＃13;

$.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');

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;