CSS 如何更改引导程序复选框的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37493852/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how can I change the color of bootstrap checkbox?
提问by user3766930
I have the following html code:
我有以下 html 代码：
<div class="container">
<form name="queryForm" class="form-inline text-center">
<p class="checkbox-inline">
<input type="checkbox" name="optionsRadios" id="checkOther" value="other" ng-model="formData.other" ng-true-value="'other'" ng-init="formData.other='other'">Other</p>
</form>
</div>
and the result of that is:
结果是：
What's the simplest way of changing this color to a given one, for example D7B1D7?
将此颜色更改为给定颜色的最简单方法是什么，例如 D7B1D7？
采纳答案by Yass
I've adapted the .squaredThreeclass from this CodePenfor your example. There's a Fiddle link at the bottom of my answer if you want to see a live example.
我已经为您的示例改编了.squaredThree此CodePen 中的课程。如果您想查看现场示例，我的答案底部有一个 Fiddle 链接。
Here's the updated CSS:
这是更新后的 CSS：
/* .squaredThree */
.squaredThree {
position: relative;
float:left;
}
.squaredThree label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: #D7B1D7;
border-radius: 4px;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
}
.squaredThree label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredThree label:hover::after {
opacity: 0.3;
}
.squaredThree input[type=checkbox] {
visibility: hidden;
}
.squaredThree input[type=checkbox]:checked + label:after {
opacity: 1;
}
/* end .squaredThree */
I've updated your HTML to include another label, as the original labelis used as a pseudo checkbox. This is your updated HTML:
我已更新您的 HTML 以包含另一个label，因为原始文件label用作伪复选框。这是您更新的 HTML：
<div class="container">
<form name="queryForm" class="form-inline">
<div class="squaredThree">
<input type="checkbox" name="optionsRadios" id="checkOther" value="other" ng-model="formData.other" ng-true-value="'other'" ng-init="formData.other='other'">
<label for="checkOther"></label>
</div>
<label class="label-text">Other</label>
</form>
</div>
Note that the additional labelexists outside the .squaredThreediv. The labelhas a class of .label-textas some additional styling rules are needed to move the text slightly to the right of the checkbox:
请注意，附加项label存在于.squaredThreediv. 该label有一个类的.label-text一些附加的样式规则的文字稍微移动到右面需要checkbox：
.label-text {
position: relative;
left: 10px;
}
Finally, the size of the check in the checkboxisn't quite right so an additional rule is needed to rectify that:
最后，检查的大小checkbox不太正确，因此需要额外的规则来纠正：
*,
::before,
::after {
box-sizing: initial;
}
Fiddle Demoshowing the above in action.
Fiddle Demo显示了上面的操作。
回答by AndrewRIGHT
If you use bootstrap and you need to change checkbox color background, just override this styles:
如果您使用引导程序并且需要更改复选框颜色背景，只需覆盖此样式：
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
background-color: green!important;
}
.custom-checkbox .custom-control-input:checked:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 255, 0, 0.25)
}
.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 0, 0, 0.25)
}
.custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
background-color: #C8FFC8;
} <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="myTest custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>回答by Constantin
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
border-color: #D7B1D7;
background-color: #D7B1D7;
}
回答by Justin
Simple version of AndrewRIGHT's answer:
AndrewRIGHT 答案的简单版本：
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
background-color: #333;
border-color: #333;
}
回答by Mona
input[type=checkbox]does not not have a background-colorproperty. You can use other ways to get your desirable result:
input[type=checkbox]没有background-color财产。您可以使用其他方法来获得理想的结果：
You can use the checkbox inside a div and then style the div according to your needs.
<div class="row"> <input type="checkbox" /> </div>You can use pseudo elements like these:
input[type=checkbox] { cursor: pointer; } input[type=checkbox]:after { content: " "; background-color: #D7B1D7; display: inline-block; visibility: visible; } input[type=checkbox]:checked:after { content: "14"; }
您可以使用 div 中的复选框，然后根据需要设置 div 的样式。
<div class="row"> <input type="checkbox" /> </div>你可以使用这样的伪元素：
input[type=checkbox] { cursor: pointer; } input[type=checkbox]:after { content: " "; background-color: #D7B1D7; display: inline-block; visibility: visible; } input[type=checkbox]:checked:after { content: "14"; }
