CODEWITHSUNDEEP
htmlcssbootstrap-4
SBT23434
SBT23434

Reputation: 185

How do you change the background color on the active state of a Bootstrap custom checkbox?

Bootstrap 4 custom forms docs

If you inspect the custom checkbox and click the 'active' element state, you notice a blue background appears in the checkbox. This can also be reproduced by holding your mouse down inside of the custom checkbox without releasing.

I am trying to remove the blue background/shadow by using the :active selector but it is not applying the style.

Here is my code:

.custom-control-input:active {
  background-color: none !important;
  box-shadow: none !important
}

Upvotes: 2

Views: 2204

Answers (1)

Jakub Muda
Jakub Muda

Reputation: 6744

What you need to do is to open bootstrap CSS and find the exact classes you need to override. Here you have an example of custom colors.

NOTE: !important was only required here in this snippet, otherwise it wouldn't work on Stackoverflow. You don't need to use it in your project.

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: red !important;
  background-color: red !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(255,0,0,.25) !important;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: green !important;
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  color: #fff;
  background-color: yellow !important;
  border-color: yellow !important;
}

.custom-control-input:disabled ~ .custom-control-label {
  color: blue !important;
}

.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: pink !important;
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: red !important;
  background-color: red !important;
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5) !important;
}

.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5) !important;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: red !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="custom-control custom-checkbox p-5">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Upvotes: 5

Related Questions