不同颜色的多个复选框几个id

Question

我想知道如何为复选框着色，我必须在不使用php的情况下创建几种不同的颜色，我们如何处理不同id的复选框？内容：'✔'不显示..感谢您的帮助

input[type='checkbox'] {
  color:orange;
  outline: 1px solid orange;
  width: 14px !important;
  height: 14px !important;
  margin: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  content: '';
  box-shadow: none;
  font-size: 0.8em;
  text-align: center;
  line-height: 1em;

}

input[type="checkbox"]:not(:checked) + label:after,
input[type="checkbox"]:checked + label:after {
     content: '✔';

     color: orange;
}

<input type="checkbox" id="orange" value="" checked="checked">
<input type="checkbox" id="purple" value="">
<input type="checkbox" id="pink"  value="">

com/h533A.jpg

Answer 1

input[type='checkbox']{
  width: 14px ;
  height: 14px ;
  outline: 1px solid orange;
  box-shadow: none;
  font-size: 1em;
  text-align: center;
  line-height: 1em;
  background: white;
  -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 appearance: none;
}
input[type='checkbox']:checked:after {
  content: '✔';
  color: orange;
}

<input type="checkbox" class="checkbox" id="orange" value="" checked="checked">

您可以使用此代码与您的代码进行比较和检查

CSS 代码

input[type='checkbox']{
  width: 14px ;
  height: 14px ;
  outline: 1px solid orange;
  box-shadow: none;
  font-size: 1em;
  text-align: center;
  line-height: 1em;
  background: white;
  -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 appearance: none;
}
input[type='checkbox']:checked:after {
  content: '✔';
  color: orange;
}

html代码

<input type="checkbox" class="checkbox" id="orange" value="" checked="checked">

Answer 2

我将 '✔' 替换为 '\2713'；在 css 中，它可以工作