我总是使用伪元素:before和:after来改变复选框和单选按钮的外观。它很有魔力。

更多信息请参考这个链接

CODEPEN

步骤

使用css规则隐藏默认复选框，如可见度:hidden或不透明度:0或位置:absolute;left:-9999px等。 使用:before元素创建一个假复选框，并传递一个空的或不间断的空格'\00a0'; 当复选框处于:checked状态时，传递unicode内容:"\2713"，这是一个复选标记; 添加:焦点样式，使复选框可访问。 完成

我是这样做的。

.box { background: #666666; color: #ffffff; width: 250px; padding: 10px; margin: 1em auto; } p { margin: 1.5em 0; padding: 0; } input[type="checkbox"] { visibility: hidden; } label { cursor: pointer; } input[type="checkbox"] + label:before { border: 1px solid #333; content: "\00a0"; display: inline-block; font: 16px/1em sans-serif; height: 16px; margin: 0 .25em 0 0; padding: 0; vertical-align: top; width: 16px; } input[type="checkbox"]:checked + label:before { background: #fff; color: #333; content: "\2713"; text-align: center; } input[type="checkbox"]:checked + label:after { font-weight: bold; } input[type="checkbox"]:focus + label::before { outline: rgb(59, 153, 252) auto 5px; } <div class="content"> <div class="box"> <p> <input type="checkbox" id="c1" name="cb"> <label for="c1">Option 01</label> </p> <p> <input type="checkbox" id="c2" name="cb"> <label for="c2">Option 02</label> </p> <p> <input type="checkbox" id="c3" name="cb"> <label for="c3">Option 03</label> </p> </div> </div>

更时尚的用法:before和after

body{ font-family: sans-serif; } .container { margin-top: 50px; margin-left: 20px; margin-right: 20px; } .checkbox { width: 100%; margin: 15px auto; position: relative; display: block; } .checkbox input[type="checkbox"] { width: auto; opacity: 0.00000001; position: absolute; left: 0; margin-left: -20px; } .checkbox label { position: relative; } .checkbox label:before { content: ''; position: absolute; left: 0; top: 0; margin: 4px; width: 22px; height: 22px; transition: transform 0.28s ease; border-radius: 3px; border: 2px solid #7bbe72; } .checkbox label:after { content: ''; display: block; width: 10px; height: 5px; border-bottom: 2px solid #7bbe72; border-left: 2px solid #7bbe72; -webkit-transform: rotate(-45deg) scale(0); transform: rotate(-45deg) scale(0); transition: transform ease 0.25s; will-change: transform; position: absolute; top: 12px; left: 10px; } .checkbox input[type="checkbox"]:checked ~ label::before { color: #7bbe72; } .checkbox input[type="checkbox"]:checked ~ label::after { -webkit-transform: rotate(-45deg) scale(1); transform: rotate(-45deg) scale(1); } .checkbox label { min-height: 34px; display: block; padding-left: 40px; margin-bottom: 0; font-weight: normal; cursor: pointer; vertical-align: sub; } .checkbox label span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .checkbox input[type="checkbox"]:focus + label::before { outline: 0; } <div class="container"> <div class="checkbox"> <input type="checkbox" id="checkbox" name="" value=""> <label for="checkbox"><span>Checkbox</span></label> </div> <div class="checkbox"> <input type="checkbox" id="checkbox2" name="" value=""> <label for="checkbox2"><span>Checkbox</span></label> </div> </div>

SCSS / SASS实现

更现代的方法

对于使用SCSS(或容易转换为SASS)的人来说，下面的内容将会有所帮助。有效地，在复选框旁边创建一个元素，这就是您要设置样式的元素。当单击复选框时，CSS重新设置姐妹元素的样式(为您选中的新样式)。代码如下:

label.checkbox { input[type="checkbox"] { visibility: hidden; display: block; height: 0; width: 0; position: absolute; overflow: hidden; &:checked + span { background: $accent; } } span { cursor: pointer; height: 15px; width: 15px; border: 1px solid $accent; border-radius: 2px; display: inline-block; transition: all 0.2s $interpol; } } <label class="checkbox"> <input type="checkbox" /> <span></span> Label text </label>

我认为最简单的方法是通过样式化标签并使复选框不可见。

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就可以改变复选框的灰度颜色。

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

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

更新:

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

从我的谷歌，这是最简单的方法复选框样式。只需根据您的设计添加:after和:checked:after CSS。

body{ background: #DDD; } span{ margin-left: 30px; } input[type=checkbox] { cursor: pointer; font-size: 17px; visibility: hidden; position: absolute; top: 0; left: 0; transform: scale(1.5); } input[type=checkbox]:after { content: " "; background-color: #fff; display: inline-block; color: #00BFF0; width: 14px; height: 19px; visibility: visible; border: 1px solid #FFF; padding: 0 3px; margin: 2px 0; border-radius: 8px; box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16); } input[type=checkbox]:checked:after { content: "\2714"; display: unset; font-weight: bold; } <input type="checkbox"> <span>Select Text</span>