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

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

有一种方法可以使用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 > < / >标签

自定义复选框与CSS (WebKit浏览器解决方案仅Chrome, Safari，移动浏览器)

<input type="checkbox" id="cardAccptance" name="cardAccptance" value="Yes">
<label for="cardAccptance" class="bold"> Save Card for Future Use</label>

CSS:

    /* The checkbox-cu */
    
    .checkbox-cu {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 0;
        cursor: pointer;
        font-size: 16px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    
    /* Hide the browser's default checkbox-cu */
    
    .checkbox-cu input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    
    
    /* Create a custom checkbox-cu */
    
    .checkmark {
        position: absolute;
        top: 4px;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #eee;
        border: 1px solid #999;
        border-radius: 0;
        box-shadow: none;
    }
    
    
    /* On mouse-over, add a grey background color */
    
    .checkbox-cu:hover input~.checkmark {
        background-color: #ccc;
    }
    
    
    /* When the checkbox-cu is checked, add a blue background */
    
    .checkbox-cu input:checked~.checkmark {
        background-color: transparent;
    }
    
    
    /* Create the checkmark/indicator (hidden when not checked) */
    
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    
    
    /* Show the checkmark when checked */
    
    .checkbox-cu input:checked~.checkmark:after {
        display: block;
    }
    
    
    /* Style the checkmark/indicator */
    
    .checkbox-cu .checkmark::after {
        left: 7px;
        top: 3px;
        width: 6px;
        height: 9px;
        border: solid #28a745;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        z-index: 100;
    }

你可以使用label元素设置复选框的样式，示例如下:

.checkbox > input[type=checkbox] { visibility: hidden; } .checkbox { position: relative; display: block; width: 80px; height: 26px; margin: 0 auto; background: #FFF; border: 1px solid #2E2E2E; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .checkbox:after { position: absolute; display: inline; right: 10px; content: 'no'; color: #E53935; font: 12px/26px Arial, sans-serif; font-weight: bold; text-transform: capitalize; z-index: 0; } .checkbox:before { position: absolute; display: inline; left: 10px; content: 'yes'; color: #43A047; font: 12px/26px Arial, sans-serif; font-weight: bold; text-transform: capitalize; z-index: 0; } .checkbox label { position: absolute; display: block; top: 3px; left: 3px; width: 34px; height: 20px; background: #2E2E2E; cursor: pointer; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; z-index: 1; } .checkbox input[type=checkbox]:checked + label { left: 43px; } <div class="checkbox"> <input id="checkbox1" type="checkbox" value="1" /> <label for="checkbox1"></label> </div>

上面的代码还有一个FIDDLE。注意，有些CSS在旧版本的浏览器中不起作用，但我相信有一些奇特的JavaScript示例!

一个简单而轻量级的模板:

input[type=checkbox] { cursor: pointer; } input[type=checkbox]:checked:before { content: "\2713"; background: #fffed5; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 20px; text-align: center; line-height: 8px; display: inline-block; width: 13px; height: 15px; color: #00904f; border: 1px solid #cdcdcd; border-radius: 4px; margin: -3px -3px; text-indent: 1px; } input[type=checkbox]:before { content: "\202A"; background: #ffffff; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 20px; text-align: center; line-height: 8px; display: inline-block; width: 13px; height: 15px; color: #00904f; border: 1px solid #cdcdcd; border-radius: 4px; margin: -3px -3px; text-indent: 1px; } <input type="checkbox" checked="checked">checked1<br> <input type="checkbox">unchecked2<br> <input type="checkbox" checked="checked" id="id1"> <label for="id1">checked2+label</label><br> <label for="id2">unchecked2+label+rtl</label> <input type="checkbox" id="id2"> <br>

https://jsfiddle.net/rvgccn5b/

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

对于像这样的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;
}