更改 Bootstrap 4 复选框背景颜色 [英] Change Bootstrap 4 checkbox background color
问题描述
我想知道如何更改此示例中的 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"><风格>.custom-control-label::before,.custom-control-label::after {顶部:.8rem;宽度:1.25rem;高度:1.25rem;}</风格><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">勾选这个自定义复选框</label>
可以使用下面的css,让不勾选时红色,勾选时黑色
.custom-control-label:before{背景颜色:红色;}.custom-checkbox .custom-control-input:checked~.custom-control-label::before{背景颜色:黑色;}
箭头的颜色可以通过以下代码改变
.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填充='红色' 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");}
此代码将使勾号变为红色,您可以通过将 fill='red'
值更改为您选择的颜色来更改颜色.
注意,如果指定 RGB 颜色,例如.#444444 使用 %23 作为散列,例如.%23444444
或者你可以使用任何你喜欢的图片.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"crossorigin="匿名"><风格>.custom-control-label:before{背景颜色:红色;}.custom-checkbox .custom-control-input:checked~.custom-control-label::before{背景颜色:黑色;}.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填充='红色' 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{背景颜色:绿色;}/** 聚焦阴影粉红色 **/.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);}</风格><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">勾选这个自定义复选框</label>
在@cprcrack 的请求后添加了焦点颜色(粉红色)
I'm wondering how can I change Bootstraps 4 checkbox background color on this given example.
<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>
you can use the following css to make it red when it is not checked, and black when it is checked
.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.
Edit: Note, if specifying RGB color, eg. #444444 use %23 for the hash, eg. %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
这篇关于更改 Bootstrap 4 复选框背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!