Adjust the background color of Bootstrap 4 checkboxes

I'm trying to figure out how I can modify the background color of a Bootstrap 4 checkbox in this specific scenario.

.custom-control-label::before,
.custom-control-label::after {
  top: .8rem;
  width: 1.25rem;
  height: 1.25rem;
}
<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">

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

Answer №1

To change the color of an element based on its checked status, you can utilize the following CSS code:

.custom-control-label:before{
  background-color: red;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
  background-color: black;
}

If you want to customize the color of the tick symbol, you can use the following code snippet:

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

You can adjust the color of the tick symbol by changing the value of fill='red' to your desired color.

Note: If specifying an RGB color like #444444, use %23 for the hash, for example, %23444444.

Alternatively, you can replace the tick image with any other image of your choice.

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

EDIT: Added a focus color (pinkish) as per @cprcrack's request.

Answer №2

For those seeking a simpler solution without the need for conditional pseudo-classes like :checked, here is an alternative approach inspired by knetsi's answer.

In this method, I created a class called my-error which can be added or removed from the checkbox element to change its color, particularly to indicate an error state. The color of the checkbox remains consistent regardless of its checked status.

Here is how you can implement it in your code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<style>
  .custom-checkbox .custom-control-input.my-error~.custom-control-label::before{
    background-color:orangered;
  }
</style>

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

Answer №3

Programming environment Angular 10.0

Preview- https://i.sstatic.net/4fhN9.png

Html

<!-- BLUE CHECKBOX -->
<div class="custom-control custom-checkbox">
  <input type="checkbox" [checked]="true" class="custom-control-input" [id]="['chk-add',item.id,uniqueTag].join('-')" />
  <label class="custom-control-label" [for]="['chk-add',item.id,uniqueTag].join('-')"></label>
</div>
<!-- GREEN CHECKBOX -->
<div class="custom-control-products custom-checkbox-products">
  <input type="checkbox" [checked]="true" class="custom-control-input-products" [id]="['chk-add',item.id,td.id,uniqueTag].join('-')" />
  <label class="custom-control-label-products" [for]="['chk-add',item.id,td.id,uniqueTag].join('-')"></label>
</div>

Scss / css

  .custom-control-products {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
  }

  .custom-control-input-products {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
  }
  
  .custom-control-input-products:checked ~ .custom-control-label-products::before {
    color: #fff;
    border-color: #007bff;
    background-color: #007bff;
  }
  
  .custom-control-input-products:focus ~ .custom-control-label-products::before {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }
  
  .custom-control-input-products:focus:not(:checked) ~ .custom-control-label-products::before {
    border-color: #80bdff;
  }
  
  .custom-control-input-products:not(:disabled):active ~ .custom-control-label-products::before {
    color: #fff;
    background-color: #b3d7ff;
    border-color: #b3d7ff;
  }
  
  .custom-control-input-products[disabled] ~ .custom-control-label-products, .custom-control-input-products:disabled ~ .custom-control-label-products {
    color: #6c757d;
  }
  
  .custom-control-input-products[disabled] ~ .custom-control-label-products::before, .custom-control-input-products:disabled ~ .custom-control-label-products::before {
    background-color: #e9ecef;
  }
  
  .custom-control-label-products {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
  }
  
  .custom-control-label-products::before {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px;
  }
  
  .custom-control-label-products::after {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50% / 50% 50%;
  }
  
  .custom-control-input-products:checked ~ .custom-control-label-products::before {
    color: #fff;
    border-color: #007bff;
    background-color: #17a2b8a8 !important;
  }

  .custom-checkbox-products .custom-control-label-products::before {
    border-radius: 0.25rem;
  }
  
  .custom-checkbox-products .custom-control-input-products:checked ~ .custom-control-label-products::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
  }
  
  .custom-checkbox-products .custom-control-input-products:indeterminate ~ .custom-control-label-products::before {
    border-color: #007bff;
    background-color: #007bff;
  }
  
  .custom-checkbox-products .custom-control-input-products:indeterminate ~ .custom-control-label-products::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
  }
  
  .custom-checkbox-products .custom-control-input-products:disabled:checked ~ .custom-control-label-products::before {
    background-color: rgba(0, 123, 255, 0.5);
  }
  
  .custom-checkbox-products .custom-control-input-products:disabled:indeterminate ~ .custom-control-label-products::before {
    background-color: rgba(0, 123, 255, 0.5);
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Styling <CardHeader> component with React and Material UI CSS

Incorporating React and Material UI, my goal is to arrange 3 divs within a <Card> <CardHeader/>, positioning them with left, center, and right alignment as illustrated below. The modification required is minor - I simply need to eliminate the ...

cssreactjsmaterial-ui

Creating a clickable image overlay card in Bootstrap 4 - A simple tutorial

I'm trying to use the Bootstrap 4 card element to create a grid of images with overlaid headings, but I'm having trouble linking the image itself. I attempted the stretched link method without success. I also tried placing the entire card in an ...

htmlcssbootstrap-4

Tips for executing parallax designs, similar to the techniques used on the

Currently, I am in the process of creating a website that utilizes parallax scrolling. Here is a brief overview of what I have accomplished thus far. I decided to use the skrollr plugin to achieve the desired parallax effect. Through this plugin, I was abl ...

javascriptjqueryhtmlcssimage

Tips on implementing a Javascript function triggered by a user's click within the video player frame

<script> function greet() { alert("hello"); } </script> <iframe width="100%" height="315" src="https://www.youtube.com/embed/AGM0ibP1MRc" onclick="greet()"></iframe> .Kindly assist me, please. ...

javascriptphphtml

Issues with Bootstrap-slider.js functionality

I'm having trouble getting the bootstrap-slider.js library from to function correctly. All I see are textboxes instead of the slider components. You can view an example at I have verified that the CSS and JS files are pointing to the correct direc ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to combine HTML and JavaScript code within a single JavaScript file?

Is there a way to include a responsive iframe without any scroll in multiple websites by using just one line of code? I found this snippet that seems promising: <script src="testfile.js"></script> The testfile.js contains the necessary HTML a ...

javascripthtml

What is the best way to enjoy video and audio content on a mobile website?

What is the best way to incorporate video and audio on mobile websites? I am interested in learning how to convert and embed a Video and an MP3 file on a page of a mobile website. ...

androidhtmlmobile-safarimobile-websitehtml5-video

Incorporating Bootstrap Content: A Guide to Including a PHP File within Another PHP File

I am encountering an issue when trying to import a PHP file containing my navigation bar into another PHP file. Here's the code for the navigation file: <?php echo " <html> <head> <nav class = "navbar navbar-default navbar-fixed-top ...

phpjqueryhtmlcss

My Django function doesn't get triggered by the form submission using post method

I'm facing a frustrating dilemma and issue. Currently, I am working on a form written in HTML using Django, which is meant to update information in my database related to the specific page it is on. The problem lies in the fact that the Django termi ...

htmldjango

Coat the div with a uniform shade of pure white

I need assistance on applying a solid white background color to hide the text behind it. For better understanding, I have attached a screenshot as a reference. https://i.stack.imgur.com/f8Qd9.png The issue arises when I click on the dropdown in the heade ...

javascripthtmlcssreactjs

Using AJAX to dynamically update a div's class following a POST request

Upon double clicking a row, I am attempting to trigger the function outlined below. Despite my efforts, I have not been able to update the div class with any changes. function book(id) { $.ajax({ type: "POST", url: "ajax_servlet. ...

javascriptjqueryhtmlajax

Tips for showing a form's help text when manually rendering fields in Django forms?

In my Forms.py file, I have the following code snippet: class CustomerForm(forms.Form): name = forms.CharField(max_length=255,required=True,validators=[alphaonly],help_text="Enter your name") I am attempting to render it in an HTML format like ...

pythonhtmldjango

I have an HTML table with multiple cells containing inner HTML tables. I have implemented a function along with buttons to filter the main table, excluding the inner tables

My HTML Table is generated from my database, containing information about machines and their status pulled from emails with HTML Tables. Each row has a click option to open/hide the <td> tag showing the original table for more details and better trac ...

javascripthtmlhtml-table

Is there a way to update my profile picture without having to constantly refresh the page after uploading it?

Here is the code for my profile page. I am considering using a callback along with another useEffect function, but I'm unsure. Please help me in finding a solution. For now, let's ignore all the code related to deleting, saving, and handling ingr ...

javascripthtmlreactjsnpmreact-hooks

What is the standard size for PHP files, or the suggested maximum limit?

I created a tool at where users can upload a .php file with comments and spaces, and it will compress it for a smaller file size. It functions similar to but is web-based and provides instant results. Once you click upload, you receive a prompt to downl ...

phphtmluploadpreprocessor

Achieving Vertical Content Alignment in Bootstrap 4

I am struggling to achieve a responsive design where two columns stack vertically on top of each other when viewed on smaller mobile screens. Despite numerous attempts, I have been unable to figure it out. Ideally, I want the layout to look like this imag ...

htmlcssbootstrap-4

I am experiencing issues with my bootstrap file not working despite providing the correct file path. The styles are not being applied on my webpage

The file path is provided below <link rel="stylesheet" href="../css/bootstrap.min.css"> I have exhausted all options in an attempt to resolve the issue. The browser console indicates a 404 error (err_abborted) ...

phphtmlcssbootstrap-4

Left-aligned collapsible navigation menu built with Bootstrap

Looking for a unique template or code snippet to implement the same menu as the one on this website: I want the menu to slide in from the left while darkening the rest of the screen, just like the site I referenced. Is there a bootstrap template that can ...

jqueryhtmlcsstwitter-bootstrap

Utilizing jQuery's each() function to create a seamless loop of background images in a

Struggling with looping the background image in a slick slider? Check out the code snippet below. var json = [ { "img_url": "https://via.placeholder.com/500x500?text=1" }, { "img_url": "https://via.placeholder.com/500x500?text=2" }, { "img_url": "ht ...

javascriptjquerycss

Is there a way to retrieve the left offset of a floating element even when it is positioned outside the viewport?

My current situation involves creating several panels that are stacked side by side within a main container. Each panel takes up 100% of the viewport width and height. I want to be able to horizontally scroll to each panel when clicking on their respective ...

javascriptjqueryhtmlcssviewport