你可以使用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; -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>

更新:

下面的答案参考了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，并重定向单击事件。

最近我发现了一个很有趣的解决方法。

你可以用appearance: none;关闭复选框的默认样式，然后像这里描述的那样在上面写你自己的样式(例4)。

input[type=checkbox] { width: 23px; height: 23px; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-right: 10px; background-color: #878787; outline: 0; border: 0; display: inline-block; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } input[type=checkbox]:focus { outline: none; border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } input[type=checkbox]:checked { background-color: green; text-align: center; line-height: 15px; } <input type="checkbox">

不幸的是，浏览器对外观选项的支持很差。从我的个人测试来看，我只有Opera和Chrome可以正常工作。但是当更好的支持到来或者你只想使用Chrome/Opera时，这将是保持简单的方式。

例子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;
    }

您可以避免添加额外的标记。这适用于任何地方，除了IE通过设置CSS外观:

输入(type = "复选框"){ -webkit-appearance:没有; -moz-appearance:没有; 外观:无; /*样式复选框*/ 宽度:16 px; 高:16 px; 背景颜色:红色; ｝ 检查输入(type = "复选框"):{ 背景颜色:绿色; ｝ <input type="checkbox" />