更改Bootstrap 4复选框背景颜色

Question

我想知道如何在这个给定的例子中更改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>  

Answer 1

您可以使用以下css在未选中时将其设置为红色,在选中时使用黑色

.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");
}

此代码将勾选红色,您可以通过将fill='red'值更改为您选择的颜色来更改颜色.或者您可以使用您喜欢的任何图像.

<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>

编辑:在@cprcrack的请求后添加了焦点颜色(粉红色)