CodepenLink

-只需添加CSS属性。不需要添加任何Javascript。

我总是使用伪元素: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>

CodepenLink

-只需添加CSS属性。不需要添加任何Javascript。

现在只使用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

从我的谷歌，这是最简单的方法复选框样式。只需根据您的设计添加: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>