这是最简单的方法，你可以选择哪个复选框来提供这种样式。

CSS:

.check-box input {
  display: none;
}

.check-box span:before {
  content: ' ';
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("unchecked.png");
}

.check-box input:checked + span:before {
  background: url("checked.png");
}

HTML:

<label class="check-box">
  <input type="checkbox">
  <span>Check box Text</span>
</label>

有一种方法可以使用CSS来做到这一点。我们可以(ab)使用label元素并样式化该元素。需要注意的是，这将不适用于Internet Explorer 8及更低版本。

.myCheckbox输入{ 位置:相对; z - index: -9999; ｝ .myCheckbox span { 宽度:20 px; 高度:20 px; 显示:块; 背景:url(“link_to_image”); ｝ .myCheckbox输入:checked + span { 背景:url(“link_to_another_image”); ｝ <label for="test">我的样式化的"复选框"的标签</label> <标签类= " myCheckbox " > <input type="checkbox" name="test" /> < span > < / span > < / >标签

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

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。

不需要JavaScript或jQuery。

简单地改变你的复选框样式。

input[type="checkbox"] { display: none; border: none !important; box-shadow: none !important; } input[type="checkbox"] + label span { background: url(http://imgh.us/uncheck.png); width: 49px; height: 49px; display: inline-block; vertical-align: middle; } input[type="checkbox"]:checked + label span { background: url(http://imgh.us/check_2.png); width: 49px; height: 49px; vertical-align: middle; } <input type="checkbox" id="option" /> <label for="option"> <span></span> Click me </label>

这是一个JSFiddle链接

你可以简单地使用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;
}

实现简单，易于定制的解决方案

经过大量的搜索和测试，我得到了这个解决方案，它是简单的实现和更容易定制。在此解决方案中:

您不需要外部库和文件 你不需要加 在页面中添加额外的HTML 您不需要更改复选框名称 和id

简单地把流动的CSS放在你的页面顶部，所有的复选框样式将像这样改变:

input[type=checkbox] { transform: scale(1.5); } input[type=checkbox] { width: 30px; height: 30px; margin-right: 8px; cursor: pointer; font-size: 17px; visibility: hidden; } input[type=checkbox]:after, input[type=checkbox]::after { content: " "; background-color: #fff; display: inline-block; margin-left: 10px; padding-bottom: 5px; color: #00BFF0; width: 22px; height: 25px; visibility: visible; border: 1px solid #00BFF0; padding-left: 3px; border-radius: 5px; } input[type=checkbox]:checked:after, input[type=checkbox]:checked::after { content: "\2714"; padding: -5px; font-weight: bold; } <input type="checkbox" id="checkbox1" /> <label for="checkbox1">Checkbox</label>