Customizing Bootstrap 4 Checkbox Styles

Question

Customizing Bootstrap 4 Checkbox Styles

Looking for a way to customize a checkbox in Bootstrap 4? I've been struggling to change the background color with no success. Here is the code I'm working with:

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

I'm not sure what to target here to change the background color. Can someone provide some guidance on how to do this?

Appreciate any help or advice you can offer. Thank you.

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

This solution was successful for me:

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

Answer 2

This solution was successful for me:

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

Answer 3

Answer №2

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

Answer 4

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

Answer 5

Answer №3

To change the style of custom-control-indicator, you need to override it.

Here's how you can do it:

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

Answer 6

To change the style of custom-control-indicator, you need to override it.

Here's how you can do it:

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

Answer 7

Answer №4

I created a small demonstration 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;
                }

                ...

</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 custom checkboxes. You can use any shape or color to customize them as you like.</p>
        <label class="custom-checkbox">
            <input name="check" type="checkbox" autocomplete="off" >
            ...
            ...
        </label>

        ...

    </div>

<div class="container">
    <h3>Create custom checkbox with Bootstrap and Font Awesome</h3>
    <p>Here are some samples of custom checkboxes. You can use any shape or color to make them the way you want.</p>
    ...
    ...
</div>

https://jsfiddle.net/eghbaly/t4zvshdu/4/ https://github.com/eghbaly/BS-CustomCheckbox

Answer 8

I created a small demonstration 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;
                }

                ...

</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 custom checkboxes. You can use any shape or color to customize them as you like.</p>
        <label class="custom-checkbox">
            <input name="check" type="checkbox" autocomplete="off" >
            ...
            ...
        </label>

        ...

    </div>

<div class="container">
    <h3>Create custom checkbox with Bootstrap and Font Awesome</h3>
    <p>Here are some samples of custom checkboxes. You can use any shape or color to make them the way you want.</p>
    ...
    ...
</div>

https://jsfiddle.net/eghbaly/t4zvshdu/4/ https://github.com/eghbaly/BS-CustomCheckbox

Answer 9

Answer №5

I share the same query as olefrank. I am interested in implementing a different image. For instance, on our intranet's forms page, instead of using a checkbox to indicate a favorite form, I would like the user to choose a star symbol. I was able to achieve this with images following the guidelines outlined in Bootstrap 4 documentation:

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

Next, I included the following CSS:

.custom-checkbox .custom-control-label::before {border-color: transparent; background-color: transparent;}
.custom-checkbox .custom-control-label::after {background-image: url(five-pointed-star.svg); background-size: 100%;}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {border-color: transparent; background-color: transparent;}
.custom-checkbox .custom-control-input:checked~.custom-control-label::after {background-image: url(five-pointed-star-selected.svg); background-size: 100%;}

However, I am eager to learn how to specify an alternative image using a web font, though this is currently beyond my expertise!

Answer 10

I share the same query as olefrank. I am interested in implementing a different image. For instance, on our intranet's forms page, instead of using a checkbox to indicate a favorite form, I would like the user to choose a star symbol. I was able to achieve this with images following the guidelines outlined in Bootstrap 4 documentation:

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

Next, I included the following CSS:

.custom-checkbox .custom-control-label::before {border-color: transparent; background-color: transparent;}
.custom-checkbox .custom-control-label::after {background-image: url(five-pointed-star.svg); background-size: 100%;}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {border-color: transparent; background-color: transparent;}
.custom-checkbox .custom-control-input:checked~.custom-control-label::after {background-image: url(five-pointed-star-selected.svg); background-size: 100%;}

However, I am eager to learn how to specify an alternative image using a web font, though this is currently beyond my expertise!

Customizing Bootstrap 4 Checkbox Styles

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Ensure that the input group is entirely visible and does not wrap within a table cell

Using both .table-active and .table-stripped simultaneously will cause conflicts and not work properly

Issue with Django Ajax Post functionality not working correctly

How to apply distinct CSS styles to individual pages in Orchard CMS?

Arranging the button next to the text input field in an Angular application

Is there a way to adjust the width of my web layout without sacrificing its responsiveness?

I'm looking to extract information from a webpage using Python by inputting specific criteria

The lengthy string is not breaking into separate lines as expected in Internet Explorer

Retrieve JSON data within a service and provide it to a component

Looking for assistance with my website's navigation bar and logo

How can I make multiple elements change color when hovering with CSS?

Transform input string containing newline characters into separate paragraphs

Searching for the class _XWk using BeautifulSoup: A beginner's guide

CSS techniques for positioning a header image

Issue with applying CSS properties of 'top' and 'left' to a dynamically created div using

Using CSS :hover for elements with dual classes only

Looking to show an image when a checkbox is ticked and hide it when it is unticked in HTML?

What is the best way to align text at the center of a circular animation?

Need a guide to identify HTML elements with a particular attribute?

Tips for retrieving data from a database with just one key press