使用纯CSS修改复选框样式。这不需要任何JavaScript或HTML操作:

.form input[type="checkbox"]:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; content: "\f096"; opacity: 1 !important; margin-top: -25px; appearance: none; background: #fff; } .form input[type="checkbox"]:checked:before { content: "\f046"; } .form input[type="checkbox"] { font-size: 22px; appearance: none; -webkit-appearance: none; -moz-appearance: none; } <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <form class="form"> <input type="checkbox" /> </form>

我的解决方案

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>

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

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

您不需要外部库和文件 你不需要加 在页面中添加额外的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>

这是一个CSS/HTML的版本，不需要jQuery或JavaScript，简单干净的HTML和真正简单和短的CSS。

这是JSFiddle

http://jsfiddle.net/v71kn3pr/

下面是HTML:

<div id="myContainer">
    <input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" />
    <label for="myCheckbox_01_item" class="box"></label>
    <label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label>
</div>

这是CSS

#myContainer {
    outline: black dashed 1px;
    width: 200px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] {
    display: none;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #FFF ;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #F00;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
    font: normal 12px arial;
    display: inline-block;
    line-height: 27px;
    vertical-align: top;
    margin: 5px 0px;
}

这可以调整为能够有单独的单选或复选框，复选框组和单选按钮组。

这个html/css，将允许你也捕获点击标签，所以复选框将被选中和未选中，即使你只是点击标签。

这种类型的复选框/单选按钮适用于任何形式，完全没有问题。已测试使用PHP, ASP。NET (.aspx)， JavaServer Faces和ColdFusion。

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

通过使用Materialize和一个自定义样式表，你可以实现这样的东西:

CSS代码

.custom_checkbox[type="checkbox"]:checked + span:not(.lever)::before {
  border: 2px solid transparent;
  border-bottom: 2px solid #ffd600;
  border-right: 2px solid #ffd600;
  background: transparent;
}

HTML代码

<label>
    <input type="checkbox" class="custom_checkbox" />
    <span>Text</span>
</label>

Demo

JSFiddle演示