Setting Colour of Selected Checkbox

Question

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-success"><input type="checkbox"> Low  </label>
    <label class="btn btn-warning"><input type="checkbox"> Medium  </label>
    <label class="btn btn-danger"><input type="checkbox"> High </label>
</div>  
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary"><input type="checkbox"> Open  </label>
    <label class="btn btn-secondary"><input type="checkbox"> Closed  </label>
</div>
<div class="btn-group" data-toggle="buttons">
    <label class="btn label-info"><input type="checkbox"> Yes  </label> 
    <label class="btn btn-dark"><input type="checkbox"> No </label>
</div>

My question is regarding how to set the color of all checkboxes as the same when they have been selected. I tried

.btn.active {
  background-color: limegreen;
}

but to no avail.

Changing style of a checkbox is not as easy as you think but still possible here is a usefull post: https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css — C.Schubert, Feb 17 '18 at 17:39

score 1 · Accepted Answer · answered Feb 17 '18 at 18:33

Setting the color of all checkboxes in their active state is a bit more involved than you might have expected originally. That's because the specificity of your custom css must match or exceed that of the Bootstrap rules.

Below you'll find a working code snippet with the required custom css overrides. And you'll notice that it only changes the color of the buttons (as you requested) and does not change the color of the glow when a button is in focus.

Click the "run code snippet" button below to test this out:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<style>
.btn-warning:not(:disabled):not(.disabled).active,
.btn-warning:not(:disabled):not(.disabled):active,
.show>.btn-warning.dropdown-toggle {
    background-color: limegreen;
    border-color: limegreen;
}
.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active,
.show>.btn-success.dropdown-toggle {
    background-color: limegreen;
    border-color: limegreen;
}
.btn-danger:not(:disabled):not(.disabled).active,
.btn-danger:not(:disabled):not(.disabled):active,
.show>.btn-danger.dropdown-toggle {
    background-color: limegreen;
    border-color: limegreen;
}
</style>

<div class="btn-group btn-group-toggle m-3" data-toggle="buttons">
    <label class="btn btn-success">
        <input type="checkbox" name="option1" id="option1" autocomplete="off" checked> Low
    </label>
    <label class="btn btn-warning">
        <input type="checkbox" name="option2" id="option2" autocomplete="off"> Medium
    </label>
    <label class="btn btn-danger">
        <input type="checkbox" name="option3" id="option3" autocomplete="off"> High
    </label>
</div>

score 0 · Answer 2 · answered Feb 17 '18 at 17:41

0

Please see this demo bootply . Here you can see custom bootstrap checkbox styles, for example when click on the checkbox, color is not black as default, but green. You can change according to your needs

answered Feb 17 '18 at 17:41

Mile Mijatović

2,948
2
22
41

Setting Colour of Selected Checkbox

2 Answers2