看起来你只需要使用CSS就可以改变复选框的灰度颜色。

下面将复选框从黑色转换为灰色(这是我想要的):

input[type="checkbox"] {
    opacity: .5;
}

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

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

由于像Edge和Firefox这样的浏览器不支持:before:after on复选框输入标签，这里有一个纯HTML和CSS的替代方案。当然，您应该根据您的要求编辑CSS。

让复选框的HTML像这样:

<div class='custom-checkbox'>
    <input type='checkbox' />
    <label>
        <span></span>
        Checkbox label
    </label>
</div>

为复选框应用此样式可更改颜色标签

<style>
    .custom-checkbox {
        position: relative;
    }
    .custom-checkbox input{
        position: absolute;
        left: 0;
        top: 0;
        height:15px;
        width: 50px;    /* Expand the checkbox so that it covers */
        z-index : 1;    /* the label and span, increase z-index to bring it over */
        opacity: 0;     /* the label and set opacity to 0 to hide it. */
    }
    .custom-checkbox input+label {
        position: relative;
        left: 0;
        top: 0;
        padding-left: 25px;
        color: black;
    }
    .custom-checkbox input+label span {
        position: absolute;  /* a small box to display as checkbox */
        left: 0;
        top: 0;
        height: 15px;
        width: 15px;
        border-radius: 2px;
        border: 1px solid black;
        background-color: white;
    }
    .custom-checkbox input:checked+label { /* change label color when checked */
        color: orange;
    }
    .custom-checkbox input:checked+label span{ /* change span box color when checked */
        background-color: orange;
        border: 1px solid orange;
    }
</style>

我会听从SW4的建议。现在不是了:Volomike的答案比这里的所有答案都要好得多(注意我在回答的评论中建议的改进)。继续阅读这个答案，如果你对这个答案所评论的其他方法感到好奇。

首先，隐藏复选框并用自定义span覆盖它，建议使用以下HTML:

<label>
  <input type="checkbox">
  <span>send newsletter</span>
</label>

标签的包装整齐地允许点击文本，而不需要“for-id”属性链接。然而,

不要使用visibility: hidden或display: none隐藏它

它通过点击或点击来工作，但这是使用复选框的蹩脚方式。有些人仍然使用更有效的Tab键来移动焦点，Space键来激活，用这种方法隐藏会禁用它。如果表单很长，可以节省一些时间来使用tabindex或accesskey属性。如果你观察系统复选框的行为，有一个不错的阴影悬停。样式良好的复选框应该遵循此行为。

cobberboy的答案是推荐字体Awesome，它通常比位图更好，因为字体是可伸缩的向量。使用上面的HTML，我建议以下CSS规则:

Hide checkboxes input[type="checkbox"] { position: absolute; opacity: 0; z-index: -1; } I use just negative z-index since my example uses big enough checkbox skin to cover it fully. I don't recommend left: -999px since it is not reusable in every layout. Bushan wagh's answer provides a bulletproof way to hide it and convince the browser to use tabindex, so it is a good alternative. Anyway, both is just a hack. The proper way today is appearance: none, see Joost's answer: input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; } Style checkbox label input[type="checkbox"] + span { font: 16pt sans-serif; color: #000; } Add checkbox skin input[type="checkbox"] + span:before { font: 16pt FontAwesome; content: '\00f096'; display: inline-block; width: 16pt; padding: 2px 0 0 3px; margin-right: 0.5em; }

\00f096是fontawesome的方形，填充被调整为在焦点上提供均匀的虚线轮廓(见下文)。

添加复选框选中的皮肤 Input [type="checkbox"]:已检查+ span:before { 内容:“\ 00 f046”; ｝

\00f046是Font Awesome的check-square-o，它和square-o的宽度不一样，这就是上面width样式的原因。

添加焦点轮廓 Input [type="checkbox"]:焦点+ span:before { 轮廓:1px虚线#aaa; ｝ Safari不提供这个功能(参见@Jason Sankey的评论)，只支持Safari的CSS 为禁用复选框设置灰色 Input [type="checkbox"]:disabled + span { 颜色:# 999; ｝ 在非禁用复选框上设置悬停阴影 Input [type="checkbox"]:not(:禁用)+ span:hover:before { text-shadow: 0 1px 2px #77F; ｝

Test it on JS Fiddle

Try to hover the mouse over the checkboxes and use Tab and Shift+Tab to move and Space to toggle.

我的解决方案

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>

你可以使用iCheck。它是为jQuery和Zepto定制的复选框和单选按钮，也许它会对您有所帮助。

确保在iccheck .js之前加载jQuery v1.7+

Choose a color scheme, there are 10 different styles available: Black — minimal.css Red — red.css Green — green.css Blue — blue.css Aero — aero.css Grey — grey.css Orange — orange.css Yellow — yellow.css Pink — pink.css Purple — purple.css Copy /skins/minimal/ folder and icheck.js file to your site. Insert before in your HTML (replace your-path and color-scheme): <link href="your-path/minimal/color-scheme.css" rel="stylesheet"> <script src="your-path/icheck.js"></script> Example for a Red color scheme: <link href="your-path/minimal/red.css" rel="stylesheet"> <script src="your-path/icheck.js"></script> Add some checkboxes and radio buttons to your HTML: <input type="checkbox"> <input type="checkbox" checked> <input type="radio" name="iCheck"> <input type="radio" name="iCheck" checked> Add JavaScript to your HTML to launch iCheck plugin: <script> $(document).ready(function(){ $('input').iCheck({ checkboxClass: 'icheckbox_minimal', radioClass: 'iradio_minimal', increaseArea: '20%' // Optional }); }); </script> For different from black color schemes use this code (example for Red): <script> $(document).ready(function(){ $('input').iCheck({ checkboxClass: 'icheckbox_minimal-red', radioClass: 'iradio_minimal-red', increaseArea: '20%' // Optional }); }); </script> Done