隐藏输入，并在下一个元素中添加一个before，以创建等价的复选框

input[type="checkbox"] {
  display: none;    
}

input[type="checkbox"] + label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #0079bf;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
  background-color:red;
}

input[type="checkbox"]:checked + label:before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}

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

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

更新:

下面的答案参考了css3广泛可用之前的情况。在现代浏览器(包括Internet Explorer 9及更高版本)中，使用您喜欢的样式创建复选框替换更简单，而无需使用JavaScript。

以下是一些有用的链接:

使用CSS创建自定义表单复选框 简单的CSS复选框生成器 你可以用复选框黑客做的事情 使用CSS3实现自定义复选框和单选按钮 如何样式的复选框与CSS

It is worth noting that the fundamental issue has not changed. You still can't apply styles (borders, etc.) directly to the checkbox element and have those styles affect the display of the HTML checkbox. What has changed, however, is that it's now possible to hide the actual checkbox and replace it with a styled element of your own, using nothing but CSS. In particular, because CSS now has a widely supported :checked selector, you can make your replacement correctly reflect the checked status of the box.

年长的回答

这是一篇关于设置复选框样式的有用文章。基本上，作者发现不同浏览器的默认复选框差异很大，许多浏览器总是显示默认复选框，无论您如何设置它的样式。所以真的没有简单的方法。

不难想象，可以使用JavaScript将图像覆盖在复选框上，然后单击该图像就会选中真正的复选框。没有JavaScript的用户会看到默认的复选框。

编辑补充:这里有一个很好的脚本，为您做这件事;它隐藏了真正的复选框元素，将其替换为有样式的span，并重定向单击事件。

我的解决方案

input[type="checkbox"] { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; background: lightgray; height: 16px; width: 16px; border: 1px solid white; } input[type="checkbox"]:checked { background: #2aa1c0; } input[type="checkbox"]:hover { filter: brightness(90%); } input[type="checkbox"]:disabled { background: #e6e6e6; opacity: 0.6; pointer-events: none; } input[type="checkbox"]:after { content: ''; position: relative; left: 40%; top: 20%; width: 15%; height: 40%; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); display: none; } input[type="checkbox"]:checked:after { display: block; } input[type="checkbox"]:disabled:after { border-color: #7b7b7b; } <input type="checkbox"><br> <input type="checkbox" checked><br> <input type="checkbox" disabled><br> <input type="checkbox" disabled checked><br>

不需要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链接

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