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

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

我想有那些复选框，比如说谷歌日历必须选中，你想看到哪些日历

---

有什么建议吗？

您不能设置复选框的背景色

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

诀窍是隐藏复选框。复选框的标签在可设置样式的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;
}

演示：
您不能设置复选框的背景色

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

诀窍是隐藏复选框。复选框的标签在可设置样式的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;
}

演示：
也许你可以试试这个：

请根据需要定制CSS


$.fn.cbColor=函数（颜色）{
颜色=颜色| |'#f00'；
这
.addClass（'cb'）
.在（''）之前；
归还这个；
};
//将颜色应用于现有复选框
$（':checkbox'）.cbColor（'#fd0'）；
$（“#容器”）.append（“
”）；
//为动态元素应用颜色
变量$newCb=$（''），
$newCb2=$（''）；
$newCb
.appendTo（“#container”）
.after（'自定义
'）
.cbColor（“#fdf”）；
$newCb2
.appendTo（“#container”）
.after（'custom2
'））
.cbColor（“#f00”）
.cb{
显示：无；
}
.cb盒{
宽度：14px；
高度：14px；
显示：内联块；
}
.cb+标签：：之前{
内容：'\0000a0'；
右边距：0px；
}
.cb:选中+标签：：之前{
内容：'\2714'；
左边距：-12px；
右边距：6px；
字体大小：12px；
}

1

2

3

4

5

6

7

8

9
也许你可以试试这个：

请根据需要定制CSS


$.fn.cbColor=函数（颜色）{
颜色=颜色| |'#f00'；
这
.addClass（'cb'）
.在（''）之前；
归还这个；
};
//将颜色应用于现有复选框
$（':checkbox'）.cbColor（'#fd0'）；
$（“#容器”）.append（“
”）；
//为动态元素应用颜色
变量$newCb=$（''），
$newCb2=$（''）；
$newCb
.appendTo（“#container”）
.after（'自定义
'）
.cbColor（“#fdf”）；
$newCb2
.appendTo（“#container”）
.after（'custom2
'））
.cbColor（“#f00”）
.cb{
显示：无；
}
.cb盒{
宽度：14px；
高度：14px；
显示：内联块；
}
.cb+标签：：之前{
内容：'\0000a0'；
右边距：0px；
}
.cb:选中+标签：：之前{
内容：'\2714'；
左边距：-12px；
右边距：6px；
字体大小：12px；
}

1

2

3

4

5

6

7

8

9
显示您的代码，以及您迄今为止尝试过的代码。请参阅以下答案：使用标准HTML复选框控件无法复制此代码。您需要实现一个第三方复选框控件。如果您不介意添加第三方插件，我建议显示您的代码，以及您迄今为止尝试的内容。请参阅以下答案：使用标准HTML复选框控件不可能复制此控件。你需要实现一个第三方复选框控件。如果你不介意添加第三方插件，我建议你如何指定一个动态颜色（从他的函数）？不确定是否有一种方法可以编辑伪元素的css样式。但是如何（从他的函数）指定动态颜色？不确定是否有办法编辑伪元素的css样式。嘿，伙计。事实上，这一次成功了。我只是为我的案例编辑了一些内容，并按照我的意愿工作。谢谢你！：）嘿，伙计。事实上，这一次成功了。我只是为我的案例编辑了一些内容，并按照我的意愿工作。谢谢你！：）