为啥无论我做啥都不能改变复选框的颜色？ [复制]
Posted
技术标签:
【中文标题】为啥无论我做啥都不能改变复选框的颜色？ [复制]【英文标题】：Why cannot change checkbox color whatever I do? [duplicate]为什么无论我做什么都不能改变复选框的颜色？ [复制] 【发布时间】：2014-08-10 22:27:43 【问题描述】：我尝试设置复选框背景颜色的样式，但它不会改变我所做的任何事情。我正在使用最新的 Firefox 29。
css中是否有一些规则更改或可能在浏览器中？
CSS：
input[type="checkbox"]
background: #990000;
.chk
background-color: #990000;
这是一个演示http://jsfiddle.net/6KXRg/
【问题讨论】：
@blueygh2 更像是一个完美的复制品，哈哈。 谢谢大家...！我已经读过了，只是想确定问题所在！ CSS 添加新属性accent-color: red; 以更改复选框和单选按钮的默认颜色。
【参考方案1】：
虽然问题已得到解答并且较旧，但在探索一些解决复选框样式问题的选项时，我遇到了一组很棒的 CSS3 样式，仅用于控制背景颜色和其他外观的复选框和单选按钮的样式。认为这可能是这个问题的正确方向。
JSFiddle
body
background: #555;
h1
color: #eee;
font: 30px Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-shadow: 0px 1px black;
text-align: center;
margin-bottom: 50px;
input[type=checkbox]
visibility: hidden;
/* SLIDE ONE */
.slideOne
width: 50px;
height: 10px;
background: #333;
margin: 20px auto;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
position: relative;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
.slideOne label
display: block;
width: 16px;
height: 16px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
cursor: pointer;
position: absolute;
top: -3px;
left: -3px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
.slideOne input[type=checkbox]:checked + label
left: 37px;
/* SLIDE TWO */
.slideTwo
width: 80px;
height: 30px;
background: #333;
margin: 20px auto;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
position: relative;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
.slideTwo:after
content: '';
position: absolute;
top: 14px;
left: 14px;
height: 2px;
width: 52px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #111;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
.slideTwo label
display: block;
width: 22px;
height: 22px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
cursor: pointer;
position: absolute;
top: 4px;
z-index: 1;
left: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
.slideTwo label:after
content: '';
position: absolute;
width: 10px;
height: 10px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #333;
left: 6px;
top: 6px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
.slideTwo input[type=checkbox]:checked + label
left: 54px;
.slideTwo input[type=checkbox]:checked + label:after
background: #00bf00;
/* SLIDE THREE */
.slideThree
width: 80px;
height: 26px;
background: #333;
margin: 20px auto;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
position: relative;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
.slideThree:after
content: 'OFF';
font: 12px/26px Arial, sans-serif;
color: #000;
position: absolute;
right: 10px;
z-index: 0;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255,255,255,.15);
.slideThree:before
content: 'ON';
font: 12px/26px Arial, sans-serif;
color: #00bf00;
position: absolute;
left: 10px;
z-index: 0;
font-weight: bold;
.slideThree label
display: block;
width: 34px;
height: 20px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
cursor: pointer;
position: absolute;
top: 3px;
left: 3px;
z-index: 1;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
.slideThree input[type=checkbox]:checked + label
left: 43px;
/* ROUNDED ONE */
.roundedOne
width: 28px;
height: 28px;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: 20px auto;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
position: relative;
.roundedOne label
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
left: 4px;
top: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
.roundedOne label:after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 16px;
height: 16px;
background: #00bf00;
background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
background: linear-gradient(top, #00bf00 0%, #009400 100%);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
top: 2px;
left: 2px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
.roundedOne label:hover::after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
.roundedOne input[type=checkbox]:checked + label:after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
/* ROUNDED TWO */
.roundedTwo
width: 28px;
height: 28px;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: 20px auto;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
position: relative;
.roundedTwo label
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
left: 4px;
top: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
.roundedTwo label:after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 5px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
.roundedTwo label:hover::after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
.roundedTwo input[type=checkbox]:checked + label:after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
/* SQUARED ONE */
.squaredOne
width: 28px;
height: 28px;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: 20px auto;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
position: relative;
.squaredOne label
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
left: 4px;
top: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
.squaredOne label:after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 16px;
height: 16px;
background: #00bf00;
background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
background: linear-gradient(top, #00bf00 0%, #009400 100%);
top: 2px;
left: 2px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
.squaredOne label:hover::after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
.squaredOne input[type=checkbox]:checked + label:after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
/* SQUARED TWO */
.squaredTwo
width: 28px;
height: 28px;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: 20px auto;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
position: relative;
.squaredTwo label
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
left: 4px;
top: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
.squaredTwo label:after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
.squaredTwo label:hover::after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
.squaredTwo input[type=checkbox]:checked + label:after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
/* SQUARED THREE */
.squaredThree
width: 20px;
margin: 20px auto;
position: relative;
.squaredThree label
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
top: 0;
border-radius: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
.squaredThree label:after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
.squaredThree label:hover::after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
.squaredThree input[type=checkbox]:checked + label:after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
/* SQUARED FOUR */
.squaredFour
width: 20px;
margin: 20px auto;
position: relative;
.squaredFour label
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
top: 0;
border-radius: 4px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
.squaredFour label:after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 4px;
left: 4px;
border: 3px solid #333;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
.squaredFour label:hover::after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.5;
.squaredFour input[type=checkbox]:checked + label:after
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
<h1>CSS3 Checkbox Styles</h1>
<!-- Slide ONE -->
<div class="slideOne">
<input type="checkbox" value="None" id="slideOne" name="check" />
<label for="slideOne"></label>
</div>
<!-- Slide TWO -->
<div class="slideTwo">
<input type="checkbox" value="None" id="slideTwo" name="check" />
<label for="slideTwo"></label>
</div>
<!-- Slide THREE -->
<div class="slideThree">
<input type="checkbox" value="None" id="slideThree" name="check" />
<label for="slideThree"></label>
</div>
<!-- Rounded ONE -->
<div class="roundedOne">
<input type="checkbox" value="None" id="roundedOne" name="check" />
<label for="roundedOne"></label>
</div>
<!-- Rounded TWO -->
<div class="roundedTwo">
<input type="checkbox" value="None" id="roundedTwo" name="check" />
<label for="roundedTwo"></label>
</div>
<!-- Squared ONE -->
<div class="squaredOne">
<input type="checkbox" value="None" id="squaredOne" name="check" />
<label for="squaredOne"></label>
</div>
<!-- Squared TWO -->
<div class="squaredTwo">
<input type="checkbox" value="None" id="squaredTwo" name="check" />
<label for="squaredTwo"></label>
</div>
<!-- Squared THREE -->
<div class="squaredThree">
<input type="checkbox" value="None" id="squaredThree" name="check" />
<label for="squaredThree"></label>
</div>
<!-- Squared FOUR -->
<div class="squaredFour">
<input type="checkbox" value="None" id="squaredFour" name="check" />
<label for="squaredFour"></label>
</div>【讨论】：
这些很酷，但是尝试将文本放在复选框的一侧是一件非常痛苦的事情。我几乎要放弃了。 在同一行获取文本并在复选框后添加white-space:nowrap; 到适用的 div 样式【参考方案2】：
从技术上讲，可以使用 CSS 更改任何东西的颜色。如前所述，您不能更改背景颜色或颜色，但可以使用 CSS 过滤器。例如：
input[type="checkbox"] /* change "blue" browser chrome to yellow */
filter: invert(100%) hue-rotate(18deg) brightness(1.7);
如果您真的在寻找对复选框的设计控制，最好的办法是做“隐藏”复选框并设置相邻元素的样式，例如 div。
【讨论】：
这个答案应该同时被接受（hue-rotate 应该足以适应颜色） 这个答案比其他答案好！谢谢。 好的，但是复选框的颜色在不同的浏览器和设备上有所不同。 非常聪明 :) 然而，奇怪的是我们必须在 2021 年这样做）【参考方案3】：复选框无法设置样式。你需要一个第三方 js 插件，有很多可用的。
如果您想自己执行此操作，它基本上涉及隐藏复选框，创建一个元素并根据需要设置样式，然后将其单击事件绑定到两个函数，一个用于更改其外观，另一个用于激活复选框的单击事件。
在尝试为下拉选择元素上的那个小向下箭头设置样式时，也会出现同样的问题。
【讨论】：
这并不完全正确。事实上，你可以很容易地用几行 CSS 设置复选框的样式。不需要第三方插件……真正的问题是跨浏览器的兼容性，但这就是一切。我将发布我的答案只是为了让寻找这个的人完整。干杯-【参考方案4】：我有同样的问题，尝试使用大输入并且有一个非常小的复选框。经过一番搜索，这足以满足我的需求：
input[type='checkbox']
width: 30px !important;
height: 30px !important;
margin: 5px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance:none;
outline: 2px solid lightblue;
box-shadow: none;
font-size: 2em;
JSFiddle
也许有人会觉得它有用。
【讨论】：
这应该是一个可以接受的答案，因为它取代了没有任何第三方插件或大量 CSS 的复选框 这是一个很棒的答案，谢谢@chriswnl。我删除了 jQuery，但仍然通过 CSS 的:checked 伪类指示检查状态：jsfiddle.net/m9zj5Ldw
这个答案的唯一问题是选中复选框时不显示。
这是一个很好的答案。我与复选框配对，效果很好 input[type='checkbox']:checked background-color: #000; 和 input[type='checkbox']:checked:after content: '\2713';color: white;position: absolute;line-height: 1rem;font-size:1rem;padding-left: 0.15rem;【参考方案5】：
使用hue-rotate filter 一行CSS 就足够了。您也可以使用transform: scale() 更改它们的大小。
.checkbox filter: hue-rotate(0deg)
Codepen
.c1 filter: hue-rotate(0deg)
.c2 filter: hue-rotate(30deg)
.c3 filter: hue-rotate(60deg)
.c4 filter: hue-rotate(90deg)
.c5 filter: hue-rotate(120deg)
.c6 filter: hue-rotate(150deg)
.c7 filter: hue-rotate(180deg)
.c8 filter: hue-rotate(210deg)
.c9 filter: hue-rotate(240deg)
input[type=checkbox]
transform: scale(2);
margin: 10px;
cursor: pointer;
/* Prevent cursor being `text` between checkboxes */
body cursor: default <input type="checkbox" class="c1" />
<input type="checkbox" class="c2" />
<input type="checkbox" class="c3" />
<input type="checkbox" class="c4" />
<input type="checkbox" class="c5" />
<input type="checkbox" class="c6" />
<input type="checkbox" class="c7" />
<input type="checkbox" class="c8" />
<input type="checkbox" class="c9" />【讨论】：
这仅限于某些颜色。 不错，但对 MS Edge 没有任何帮助，唉。【参考方案6】：迟到但请注意：将 Chrome 升级到 v/81 后，所有复选框和单选按钮变为蓝色。因此，如果您对蓝色不满意，但对灰度不满意，这是一个非常简单的解决方案；
input[type='checkbox'], input[type='radio'] filter: grayscale(1)
在 MDN 上查看更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/filter https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale
【讨论】：
并且可以使用 filter: grayscale()100% 设置为黑色【参考方案7】：
您现在可以简单地使用accent-color 属性：
#cb1
accent-color: #9b59b6;
#cb2
accent-color: #34495e;
#cb3
accent-color: #e74c3c;
<input id="cb1" type="checkbox" checked />
<input id="cb2" type="checkbox" checked />
<input id="cb3" type="checkbox" checked />注意：由于这是一项新功能，并非所有浏览器都支持它，但它仍然有用
Here is a compatibility link
【讨论】：
Chrome、Edge、Opera 和 Firefox 现在好像是supporting this。 这里是浏览器兼容性link【参考方案8】：是的，你可以。根据这里同事的知识和网络研究，这里有最佳解决方案，可以在没有任何第三方插件的情况下设置复选框样式：
input[type='checkbox']
width: 14px !important;
height: 14px !important;
margin: 5px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
outline: 1px solid gray;
box-shadow: none;
font-size: 0.8em;
text-align: center;
line-height: 1em;
background: red;
input[type='checkbox']:checked:after
content: '✔';
color: white;
<input type='checkbox'>【讨论】：
正确！我喜欢这里的 CSS：-***.com/a/59612798/530047 但这个答案非常有效。 @Jonathan 你发布的链接很有趣，我还没有找到一种方法来设置“check”符号的样式，我只是把“✔”作为内容。我喜欢你的想法！【参考方案9】：可以这样简化：
input[type="checkbox"]
outline:2px solid red;
outline-offset: -2px;
无需任何插件即可工作:)
【讨论】：
它没有按预期工作：i.imgur.com/XIp44j6.png【参考方案10】：我也有这个问题。我使用 chrome 进行编码，因为我目前是新手。仅使用 CSS 检查复选框和单选选择器时，我能够更改它们的颜色。在 hue-rotate() 中设置的当前度数将蓝色检查变为红色。我首先将 grayscale(1) 与过滤器一起使用：但您不需要它。但是，如果您只想要纯平灰色，请选择滤镜的灰度值。
我只在 Chrome 中测试过，但它只适用于普通的旧 html 和 CSS，如果它适用于其他浏览器，请在 cmets 部分告诉我。
input[type="checkbox"],
input[type="radio"]
filter: hue-rotate(140deg);
<body>
<label for="radio1">Eau de Toilette</label>
<input type="radio" id="radio1" name="example1"><br>
<label for="radio2">Eau de Parfum</label>
<input type="radio" id="radio2" name="example1"><br>
<label for="check1">Orange Zest</label>
<input type="checkbox" id="check1" name="example2"><br>
<label for="check2">Lemons</label>
<input type="checkbox" id="check2" name="example2"><br>
</body>【讨论】：
这是一个非常酷的解决方案！我将把它与filter: grayscale(1); 一起使用。非常感谢！【参考方案11】：
你不能改变复选框的背景，但是你可以试试这个：）
.divBox
width: 20px;
height: 20px;
background: #ddd;
margin: 20px 90px;
position: relative;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
.divBox label
display: block;
width: 20px;
height: 20px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 1px;
z-index: 1;
/*
use this background transparent to check the value of checkbox
background: transparent;
*/
background: Black;
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
.divBox input[type=checkbox]:checked + label
background: green;
<div class="divBox">
<input type="checkbox" value="1" id="checkboxFourInput"name="" />
<label for="checkboxFourInput"></label>
</div>【讨论】：
【参考方案12】：假设您有一个带有类 (bootstrap) .form-check-input 的复选框。 然后，您可以使用图像作为对勾。
SCSS 代码：
<input class="form-check-input" type="checkbox">
.form-check-input
width: 22px;
height: 22px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance:none;
outline: 1px solid blue;
&:checked
background: white url('blue.svg') no-repeat;
background-size: 20px 20px;
background-position: 50% 50%;
【讨论】：
【参考方案13】：透明度可能：span 内的复选框
<span style="display:inline-block; background-color:silver;padding:0px;margin:0px;height:13px; width:13px; overflow:hidden"><input type="checkbox" style="opacity:0.50;padding:0px;margin:0px" /></span>
【讨论】：
【参考方案14】：同意 iLoveTux ，应用太多东西（许多颜色和背景）没有任何效果，但这是开始工作的， 将这些属性应用到它的 css：
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance:none;
然后css样式开始在复选框上工作:)
【讨论】：
它也很棒，因为它保留了对焦环【参考方案15】：设置箭头和复选框颜色的样式。
我还没有看到任何关于箭头颜色的答案，所以我想我可以为那些想要在复选框内设置箭头样式的人添加这个。我不建议做这些事情，这只是为了演示目的。
.checkbox-label
display: block;
position: relative;
margin: auto;
cursor: pointer;
font-size: 22px;
line-height: 24px;
height: 24px;
width: 24px;
clear: both;
.checkbox-label input
position: absolute;
opacity: 0;
cursor: pointer;
.checkbox-label .checkbox-custom
position: absolute;
top: 0px;
left: 0px;
height: 24px;
width: 24px;
background-color: transparent;
border-radius: 5px;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
border: 2px solid #000;
.checkbox-label input:checked ~ .checkbox-custom
background-color: #FFEA00;
border-radius: 5px;
-webkit-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
opacity:1;
border: 2px solid #000;
.checkbox-label .checkbox-custom::after
position: absolute;
content: "";
left: 12px;
top: 12px;
height: 0px;
width: 0px;
border-radius: 5px;
border: solid #000;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(0deg) scale(0);
-ms-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
opacity:1;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
.checkbox-label input:checked ~ .checkbox-custom::after
-webkit-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
opacity:1;
left: 8px;
top: 3px;
width: 6px;
height: 12px;
border: solid #000000;
border-width: 0 2px 2px 0;
background-color: transparent;
border-radius: 0;
<div class="checkbox-container">
<label class="checkbox-label">
<input type="checkbox">
<span class="checkbox-custom"></span>
</label>
</div>【讨论】：
【参考方案16】：这应该可以解决它，内容中设置的复选标记也将完美居中。
对于像这样的 html 元素：
<input type="checkbox" />
input[type='checkbox']:checked
background-color: rgb(60,69,77,0.9);
input[type='checkbox']:checked:after
content: '\2713';
color:white;
input[type='checkbox']
text-align: center;
display: table-cell;
vertical-align: middle;
width: 20px !important;
height: 20px !important;
appearance:none;
border-radius:10%;
border: 1px solid rgb(60,69,77,0.9);
box-shadow: none;
font-size: 1em;
【讨论】：
以上是关于为啥无论我做啥都不能改变复选框的颜色？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
无论我做啥，我的 Electron 窗口都不会出现，我的代码有问题吗？