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

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

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

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

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

我更喜欢使用图标字体(如fontawesme)，因为它很容易用CSS修改它们的颜色，而且它们在高像素密度的设备上缩放得非常好。这里是另一个纯CSS变体，使用类似于上面的技术。

(下面是一个静态图像，这样你可以可视化结果;请参阅JSFiddle的交互式版本。)

与其他解决方案一样，它使用label元素。相邻的span保存复选框字符。

span.bigcheck-target { font-family: FontAwesome; /* Use an icon font for the checkbox */ } input[type='checkbox'].bigcheck { position: relative; left: -999em; /* Hide the real checkbox */ } input[type='checkbox'].bigcheck + span.bigcheck-target:after { content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */ } input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { content: "\f046"; /* fontawesome checked box (fa-check-square-o) */ } /* ==== Optional - colors and padding to make it look nice === */ body { background-color: #2C3E50; color: #D35400; font-family: sans-serif; font-weight: 500; font-size: 4em; /* Set this to whatever size you want */ } span.bigcheck { display: block; padding: 0.5em; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <span class="bigcheck"> <label class="bigcheck"> Cheese <input type="checkbox" class="bigcheck" name="cheese" value="yes" /> <span class="bigcheck-target"></span> </label> </span>

这是它的JSFiddle。

警告:在撰写本文时，以下内容是正确的，但与此同时，事情有了进展。

AFAIK现代浏览器使用本机操作系统控件显示复选框，所以没有办法对它们进行样式化。

使用纯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>

你可以简单地使用appearance:在现代浏览器中没有，这样就没有默认样式，所有的样式都被正确应用:

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 1px solid gray;
  outline: none;
  vertical-align: middle;
}

input[type=checkbox]:checked {
  background-color: blue;
}