Style Bootstrap 4 Custom Checkbox
It worked for me with
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
background-color: #caca4c;
}
.custom-control-input:checked~.custom-control-label::before {
color: #fff;
background-color: #caca4c;
}
I made a little demo for you
<style>
.custom-checkbox {
padding: 0;
}
.custom-checkbox .fa-toggle-on,
.custom-checkbox .fa-toggle-off {
font-size: 135%;
/*this icon is relatively small*/
}
.custom-checkbox input[type=checkbox] {
visibility: collapse;
width: 0px;
margin-left: -0.25em;
}
.custom-checkbox input[type=checkbox] ~ .custom-check-on {
display: none;
}
.custom-checkbox input[type=checkbox]:checked ~ .custom-check-on {
display: inline;
}
.custom-checkbox input[type=checkbox]:checked ~ .custom-check-off {
display: none;
}
.custom-checkbox input[type=checkbox]:disabled ~ * {
color: #b6b4b4;
}
.custom-checkbox input[type=checkbox].error ~ .custom-check-on,
.custom-checkbox input[type=checkbox].error ~ .custom-check-off {
border: solid 2px red;
}
.custom-checkbox i.btn {
overflow: hidden;
color: transparent;
position: relative;
display: inline-block;
width: 3em;
padding: 0;
font-style: normal;
}
.custom-checkbox .btn:after {
content: "";
font-style: normal;
border: 7px solid white;
position: absolute;
top: 0;
bottom: 0;
border-radius: 5px;
}
.custom-checkbox .custom-check-on.btn:after {
right: -4px;
}
.custom-checkbox .custom-check-off.btn:after {
left: -4px;
}
.custom-checkbox .custom-check-on.btn:before {
content: "On";
color: white;
margin-left: -10px;
}
.custom-checkbox .custom-check-off.btn:before {
content: "Off";
color: #333;
margin-right: -15px;
}
.custom-checkbox input[type=checkbox]:checked ~ .btn.custom-check-on {
display: inline-block;
}
</style><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<div class="container">
<h3>Create custom checkbox with Bootstrap and Font Awesome</h3>
<p>Here are some samples of customcheckboxes. You litterly can use any shape or color to make them the way you like it</p>
<label class="custom-checkbox">
<input name="check" type="checkbox" autocomplete="off" >
<i class="custom-check-on btn btn-primary btn-sm">
</i><i class="custom-check-off btn btn-light active btn-sm">
</i><input name="check" type="hidden" value="false">
<span class="ml-1">
Check Box
</span>
</label>
<br>
<label class="custom-checkbox">
<input name="check" type="checkbox" autocomplete="off" >
<i class="custom-check-on fa fa fa-circle">
</i><i class="custom-check-off fal fa-circle">
</i><input name="check" type="hidden" value="false">
<span class="ml-1">
Check Box
</span>
</label>
<br>
<label class="custom-checkbox">
<input name="check" type="checkbox" autocomplete="off" >
<i class="custom-check-on far fa-check-square" style="color:black" >
</i><i class="custom-check-off far fa-square" style="color:lightgray">
</i><input name="check" type="hidden" value="false">
<span class="ml-1">
Check Box
</span>
</label>
<br>
<label class="custom-checkbox">
<input name="check" type="checkbox" autocomplete="off" >
<i class="custom-check-on text-info fa fa-toggle-on">
</i><i class="custom-check-off text-secondary fa fa-toggle-off">
</i><input name="check" type="hidden" value="false">
<span class="ml-1">
Check Box
</span>
</label>
<br>
<label class="custom-checkbox">
<input name="check" type="checkbox" autocomplete="off" >
<i class="custom-check-on text-success far fa-smile">
</i><i class="custom-check-off text-danger fas fa-angry">
</i><input name="check" type="hidden" value="false">
<span class="ml-1">
Check Box
</span>
</label>
<br>
<label class="custom-checkbox">
<input name="check" type="checkbox" autocomplete="off" >
<i class="custom-check-on fas fa-arrow-alt-circle-up">
</i><i class="custom-check-off far fa-arrow-alt-circle-down">
</i><input name="check" type="hidden" value="false">
<span class="ml-1">
Check Box
</span>
</label>
<br>
</div><div class="container">
<h3>Create custom checkbox with Bootstrap and Font Awesome</h3>
<p>Here are some samples of customcheckboxes. You litterly can use any shape or color to make them the way you like it</p>
<label class="custom-checkbox">
<input name="check" type="checkbox" autocomplete="off" >
<i class="custom-check-on btn btn-primary btn-sm">
</i><i class="custom-check-off btn btn-light active btn-sm">
</i><input name="check" type="hidden" value="false">
<span class="ml-1">
Check Box
</span>
</label>
<br>
<label class="custom-checkbox">
<input name="check" type="checkbox" autocomplete="off" >
<i class="custom-check-on fa fa fa-circle">
</i><i class="custom-check-off fal fa-circle">
</i><input name="check" type="hidden" value="false">
<span class="ml-1">
Check Box
</span>
</label>
<br>
<label class="custom-checkbox">
<input name="check" type="checkbox" autocomplete="off" >
<i class="custom-check-on far fa-check-square" style="color:black" >
</i><i class="custom-check-off far fa-square" style="color:lightgray">
</i><input name="check" type="hidden" value="false">
<span class="ml-1">
Check Box
</span>
</label>
<br>
<label class="custom-checkbox">
<input name="check" type="checkbox" autocomplete="off" >
<i class="custom-check-on text-info fa fa-toggle-on">
</i><i class="custom-check-off text-secondary fa fa-toggle-off">
</i><input name="check" type="hidden" value="false">
<span class="ml-1">
Check Box
</span>
</label>
<br>
<label class="custom-checkbox">
<input name="check" type="checkbox" autocomplete="off" >
<i class="custom-check-on text-success far fa-smile">
</i><i class="custom-check-off text-danger fas fa-angry">
</i><input name="check" type="hidden" value="false">
<span class="ml-1">
Check Box
</span>
</label>
<br>
<label class="custom-checkbox">
<input name="check" type="checkbox" autocomplete="off" >
<i class="custom-check-on fas fa-arrow-alt-circle-up">
</i><i class="custom-check-off far fa-arrow-alt-circle-down">
</i><input name="check" type="hidden" value="false">
<span class="ml-1">
Check Box
</span>
</label>
<br>
</div>
https://jsfiddle.net/eghbaly/t4zvshdu/4/ https://github.com/eghbaly/BS-CustomCheckbox
You simply just had to override custom-control-indicator style.
try as below
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
.custom-control-input:checked~.custom-control-indicator{
color:white;
background-color:red;
}
</style>
<body>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</body>
</html>.custom-control{
background-color: grey;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>