Html 更改 Bootstrap 4 复选框背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48373119/
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
Change Bootstrap 4 checkbox background color
提问by Bezelinjah
I'm wondering how can I change Bootstraps 4 checkbox background color on this given example.
我想知道如何更改此给定示例中的 Bootstraps 4 复选框背景颜色。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<style>
.custom-control-label::before,
.custom-control-label::after {
top: .8rem;
width: 1.25rem;
height: 1.25rem;
}
</style>
<div class="custom-control form-control-lg 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 knetsi
you can use the following css to make it red when it is not checked, and black when it is checked
可以使用下面的css，不勾选时为红色，勾选时为黑色
.custom-control-label:before{
background-color:red;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
background-color:black;
}
The color of the arrow can be changed by the following code
可以通过以下代码更改箭头的颜色
.custom-checkbox .custom-control-input:checked~.custom-control-label::after{
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='red' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}
this code will make the tick red, you can change the color by changing the fill='red'value to a color of your choice.
此代码将使勾号变为红色，您可以通过将fill='red'值更改为您选择的颜色来更改颜色。
Edit: Note, if specifying RGB color, eg. #444444 use %23 for the hash, eg. %23444444
编辑：注意，如果指定 RGB 颜色，例如。#444444 使用 %23 作为散列，例如。%23444444
Or you could use any image you like instead.
或者您可以使用您喜欢的任何图像。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<style>
.custom-control-label:before{
background-color:red;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
background-color:black;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::after{
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='red' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}
.custom-control-input:active~.custom-control-label::before{
background-color:green;
}
/** focus shadow pinkish **/
.custom-checkbox .custom-control-input:focus~.custom-control-label::before{
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 0, 247, 0.25);
}
</style>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>EDIT: added a focus color (pinkish) after a request from @cprcrack
编辑：在@cprcrack 的请求后添加了焦点颜色（粉红色）
回答by workerjoe
I'd like to add an answer here that's a bit simpler and more generic version of knetsi's answer, for those who may not be interested in making the color change contingent on the :checkedpseudo-class.
我想在这里添加一个答案，它是knetsi答案的一个更简单和更通用的版本，对于那些可能对使颜色更改取决于:checked伪类不感兴趣的人。
I simply wanted to define a class my-errorthat I can add or remove to the checkbox to change its color, in this case to reflect an error condition. The color stays the same whether the box is checked or not.
我只是想定义一个类my-error，我可以在复选框中添加或删除该类以更改其颜色，在这种情况下是为了反映错误情况。无论是否选中该框，颜色都保持不变。
Here's how it looks in code:
这是它在代码中的样子：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<style>
.custom-checkbox .custom-control-input.my-error~.custom-control-label::before{
background-color:orangered;
}
</style>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input my-error" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
