这将使虚线边界，以及背景你寻找，同样，如果你想设置一个特定的背景颜色，当勾选时，简单地设置它在适当的地方为你的问题:) 这个解决方案还设置了一个自定义的复选标记图标等。

对于像这样的HTML元素: <input type="checkbox" />

input[type='checkbox']:checked {
  background-color: rgb(60,69,77,0.9);
}
input[type='checkbox']:checked:after {
  content: '\2713';
  color:white;
}
input[type='checkbox']{
  background:#ff0000;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  width: 20px !important;
  height: 20px !important;
  appearance:none;
  border-radius:10%;
  border: 1px dotted rgb(60,69,77,0.9);
  box-shadow: none;
  font-size: 1em;
}

我认为最简单的方法是通过样式化标签并使复选框不可见。

HTML

<input type="checkbox" id="first" />
<label for="first">&nbsp;</label>

CSS

checkbox {
  display: none;
}

checkbox + label {
  /* Style for checkbox normal */
  width: 16px;
  height: 16px;
}

checkbox::checked + label,
label.checked {
  /* Style for checkbox checked */
}

复选框，即使它是隐藏的，仍然是可访问的，它的值将在提交表单时发送。对于旧的浏览器，您可能必须使用JavaScript将标签的类更改为checked，因为我认为旧版本的Internet Explorer不理解复选框上的::checked。

CSS基本用户界面模块第4级(最终)通过一个叫做重音-颜色的新解决方案增加了对这一点的支持，它实际上非常简单，不像这里的其他答案:

输入{ 强调色:rebeccapurple; ｝ <input type="checkbox" />

简单地设置任何CSS颜色(例如命名值，十六进制代码等)你想作为重音颜色的值，它将被应用。

这目前工作在Chrome (v93+)， Edge (v93+)， Firefox (v92+)， Opera (v79+)和Safari (v15.4+)。

注意:Edge, Chrome和Opera(可能还有Safari;我不能测试)目前也不支持通过rgba()的alpha通道值(rgba()的RGB值仍将“工作”;alpha通道将被浏览器忽略)。有关更多信息，请参阅MDN浏览器支持。

看起来你只需要使用CSS就可以改变复选框的灰度颜色。

下面将复选框从黑色转换为灰色(这是我想要的):

input[type="checkbox"] {
    opacity: .5;
}

使用纯CSS，没有花哨的:before和:after，没有转换，您可以关闭默认外观，然后使用内联背景图像对其进行样式化，如下例所示。这适用于Chrome, Firefox, Safari，现在是Edge (Chromium Edge)。

INPUT[type=checkbox]:focus { outline: 1px solid rgba(0, 0, 0, 0.2); } INPUT[type=checkbox] { background-color: #DDD; border-radius: 2px; appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 17px; height: 17px; cursor: pointer; position: relative; top: 5px; } INPUT[type=checkbox]:checked { background-color: #409fd6; background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat; } <form> <label><input type="checkbox"> I Agree To Terms &amp; Conditions</label> </form>

这是一个现代版本，有一点动画，和简单的样式，你可以自定义:

.checkbox {
    position: relative;
    width: 20px;
    height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: transparent;
    border: 2px solid #7C7A7D;
    border-radius: 5px;
    margin: 0;
    outline: none;
    transition: 0.5s ease;
    opacity: 0.8;
    cursor: pointer;
}


.checkbox:checked {
    border-color: #7C7A7D;
    background-color: #7C7A7D;
}


.checkbox:checked:before {
   position: absolute;
   left: 2px;
   top: -4px;
   display: block;
   content: '\2713';
   text-align: center;
   color: #FFF;
   font-family: Arial;
   font-size: 14px;
   font-weight: 800;
}


.checkbox:hover {
   opacity: 1.0;
   transform: scale(1.05);
}