开始之前(截至2015年1月)

最初的问题和答案现在已经有5年的历史了。因此，这是一个小小的更新。

首先，当涉及到样式化复选框时，有许多方法。基本宗旨是:

你需要隐藏默认的复选框控件，它是由你的浏览器设置的，并且不能使用CSS以任何有意义的方式覆盖。 在控件隐藏的情况下，您仍然需要能够检测并切换其已选中的状态。 复选框的选中状态需要通过样式化一个新元素来反映。

解决方案(原则上)

上面的任务可以通过许多方法来完成——您经常会听到使用CSS3伪元素是正确的方法。实际上，没有真正的正确或错误的方法，它取决于最适合您将在其中使用它的上下文的方法。也就是说，我有一个更喜欢的。

将复选框包装在标签元素中。这意味着即使它被隐藏，您仍然可以通过单击标签内的任何位置来切换其已检查状态。 隐藏你的复选框。 在复选框后添加一个新元素，您将相应地设置它的样式。它必须出现在复选框之后，以便使用CSS选择它，并根据:checked状态设置样式。CSS不能选择“向后”。

解决方案(代码形式)

label input { visibility: hidden;/* <-- Hide the default checkbox. The rest is to hide and allow tabbing, which display:none prevents */ display: block; height: 0; width: 0; position: absolute; overflow: hidden; } label span {/* <-- Style the artificial checkbox */ height: 10px; width: 10px; border: 1px solid grey; display: inline-block; } [type=checkbox]:checked + span {/* <-- Style its checked state */ background: black; } <label> <input type='checkbox'> <span></span> Checkbox label text </label>

细化(使用图标)

“但是嘿!”我听见你在喊。如果我想在盒子里画一个漂亮的勾号或叉号呢?而且我不想使用背景图片!

这就是CSS3的伪元素可以发挥作用的地方。它们支持content属性，该属性允许您注入表示任一状态的Unicode图标。或者，你也可以使用第三方字体图标源，如font awesome(但要确保你也设置了相关的字体家族，例如FontAwesome)

标签输入{ 显示:没有;/*隐藏默认复选框*/ ｝ /*设置人工复选框*/ 标签跨度{ 高度:10 px; 宽度:10 px; 边框:1px纯灰色; 显示:inline-block; 位置:相对; ｝ /*样式它的checked状态…带有标记图标*/ [type=checkbox]:已检查+ span:before { 内容:“2714 \”; 位置:绝对的; 上图:5 px; 左:0; ｝ <标识> <输入类型=“复选框”> < span > < / span > 复选框标签文本 < / >标签

通过使用:after和:before伪类附带的新功能，可以实现相当酷的自定义复选框效果。这样做的好处是:您不需要向DOM添加任何其他内容，只需添加标准复选框即可。

注意，这只适用于兼容的浏览器。我相信这与一些浏览器不允许你在输入元素上设置:after和:before有关。不幸的是，目前只支持WebKit浏览器。Firefox + Internet Explorer仍然允许复选框发挥作用，只是没有样式，这在未来有望改变(代码不使用供应商前缀)。

这是一个WebKit浏览器解决方案(Chrome, Safari，移动浏览器)

参见小提琴

$(function() { $('input').change(function() { $('div').html(Math.random()); }); }); /* Main Classes */ .myinput[type="checkbox"]:before { position: relative; display: block; width: 11px; height: 11px; border: 1px solid #808080; content: ""; background: #FFF; } .myinput[type="checkbox"]:after { position: relative; display: block; left: 2px; top: -11px; width: 7px; height: 7px; border-width: 1px; border-style: solid; border-color: #B3B3B3 #dcddde #dcddde #B3B3B3; content: ""; background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%); background-repeat: no-repeat; background-position: center; } .myinput[type="checkbox"]:checked:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%); } .myinput[type="checkbox"]:disabled:after { -webkit-filter: opacity(0.4); } .myinput[type="checkbox"]:not(:disabled):checked:hover:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%); } .myinput[type="checkbox"]:not(:disabled):hover:after { background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%); border-color: #85A9BB #92C2DA #92C2DA #85A9BB; } .myinput[type="checkbox"]:not(:disabled):hover:before { border-color: #3D7591; } /* Large checkboxes */ .myinput.large { height: 22px; width: 22px; } .myinput.large[type="checkbox"]:before { width: 20px; height: 20px; } .myinput.large[type="checkbox"]:after { top: -20px; width: 16px; height: 16px; } /* Custom checkbox */ .myinput.large.custom[type="checkbox"]:checked:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%); } .myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table style="width:100%"> <tr> <td>Normal:</td> <td><input type="checkbox" /></td> <td><input type="checkbox" checked="checked" /></td> <td><input type="checkbox" disabled="disabled" /></td> <td><input type="checkbox" disabled="disabled" checked="checked" /></td> </tr> <tr> <td>Small:</td> <td><input type="checkbox" class="myinput" /></td> <td><input type="checkbox" checked="checked" class="myinput" /></td> <td><input type="checkbox" disabled="disabled" class="myinput" /></td> <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput" /></td> </tr> <tr> <td>Large:</td> <td><input type="checkbox" class="myinput large" /></td> <td><input type="checkbox" checked="checked" class="myinput large" /></td> <td><input type="checkbox" disabled="disabled" class="myinput large" /></td> <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /></td> </tr> <tr> <td>Custom icon:</td> <td><input type="checkbox" class="myinput large custom" /></td> <td><input type="checkbox" checked="checked" class="myinput large custom" /></td> <td><input type="checkbox" disabled="disabled" class="myinput large custom" /></td> <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /></td> </tr> </table>

奖金Webkit风格的翻转开关小提琴

$(function() { var f = function() { $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)'); }; $('input').change(f).trigger('change'); }); body { font-family: arial; } .flipswitch { position: relative; background: white; width: 120px; height: 40px; -webkit-appearance: initial; border-radius: 3px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none; font-size: 14px; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; cursor: pointer; border: 1px solid #ddd; } .flipswitch:after { position: absolute; top: 5%; display: block; line-height: 32px; width: 45%; height: 90%; background: #fff; box-sizing: border-box; text-align: center; transition: all 0.3s ease-in 0s; color: black; border: #888 1px solid; border-radius: 3px; } .flipswitch:after { left: 2%; content: "OFF"; } .flipswitch:checked:after { left: 53%; content: "ON"; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <h2>Webkit friendly mobile-style checkbox/flipswitch</h2> <input type="checkbox" class="flipswitch" /> &nbsp; <span></span> <br> <input type="checkbox" checked="checked" class="flipswitch" /> &nbsp; <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。

现在只使用CSS就可以改变所有复选框的颜色:

如前所述，当选中复选框时，最近的重音颜色CSS属性用于更改复选框的颜色。 然而，我没有看到其他人提到的是，当复选框未选中时，如果你使用CSS的过滤器属性，你可以改变背景颜色和/或边界。

对于简单的更改，您可以使用亮度将白色背景颜色变深为灰色或黑色，并使用色调旋转可以为边界赋予颜色(至少在Firefox中是这样)。然而，如果你想完全改变背景为任何颜色，你也可以用滤镜来做到这一点，但你必须做一些技巧，你将多个滤镜组合在一起，基于这个问题的方法:如何仅使用CSS滤镜将黑色转换为任何给定的颜色

幸运的是，这种复杂的方法似乎在所有浏览器中都有效，并且您可以使用生成器来计算所需的过滤器:https://codepen.io/jumarjuaton/full/mdJYWYq (这个链接是从白色转换而来的，不像上面链接的问题)

请看下面的例子:

/* Disable 'filters' while checked since they impact 'accent-color'. */ input[type='checkbox']:checked { filter: none; } input[type='radio']:checked { filter: none; } /** * We use 'accent-color' for colors in the checked stated and we use * 'filter' to change the background colors in the unchecked state. */ .red-bg-input { accent-color: red; filter: invert(85%) sepia(83%) saturate(6726%) hue-rotate(360deg) brightness(111%) contrast(111%); } .green-bg-input { accent-color: green; filter: invert(49%) sepia(65%) saturate(7149%) hue-rotate(92deg) brightness(89%) contrast(103%); } .blue-bg-input { accent-color: blue; filter: invert(30%) sepia(99%) saturate(6101%) hue-rotate(202deg) brightness(52%) contrast(136%); } .teal-bg-input { accent-color: teal; filter: invert(58%) sepia(77%) saturate(3139%) hue-rotate(157deg) brightness(89%) contrast(101%) } .dark-input { accent-color: black; filter: brightness(0%) saturate(100) hue-rotate(25deg); } .gray-input { accent-color: purple; filter: brightness(60%) saturate(100) hue-rotate(25deg); } .orange-bg-input { accent-color: orange; filter: invert(63%) sepia(28%) saturate(7249%) hue-rotate(0deg) brightness(103%) contrast(105%); } <input type="checkbox" /> <input type="checkbox" checked/> <input type="radio" /> <input type="radio" checked /> Defaults <br> <input class="red-bg-input" type="checkbox" /> <input class="red-bg-input" type="checkbox" checked/> <input class="red-bg-input" type="radio" /> <input class="red-bg-input" type="radio" checked/> Red <br> <input class="green-bg-input" type="checkbox" /> <input class="green-bg-input" type="checkbox" checked/> <input class="green-bg-input" type="radio" /> <input class="green-bg-input" type="radio" checked/> Green <br> <input class="blue-bg-input" type="checkbox" /> <input class="blue-bg-input" type="checkbox" checked/> <input class="blue-bg-input" type="radio" /> <input class="blue-bg-input" type="radio" checked/> Blue <br> <input class="teal-bg-input" type="checkbox" /> <input class="teal-bg-input" type="checkbox" checked/> <input class="teal-bg-input" type="radio" /> <input class="teal-bg-input" type="radio" checked/> Teal <br> <input class="orange-bg-input" type="checkbox" /> <input class="orange-bg-input" type="checkbox" checked/> <input class="orange-bg-input" type="radio" /> <input class="orange-bg-input" type="radio" checked/> Orange <br> <input class="dark-input" type="checkbox" /> <input class="dark-input" type="checkbox" checked/> <input class="dark-input" type="radio" /> <input class="dark-input" type="radio" checked/> Black/dark <br> <input class="gray-input" type="checkbox" /> <input class="gray-input" type="checkbox" checked/> <input class="gray-input" type="radio" /> <input class="gray-input" type="radio" checked/> Purple + Gray background

我更喜欢使用图标字体(如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。

自定义复选框与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;
    }