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-

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

Checkbox input with alphabetical ordering

I am currently facing an issue with a form that has checkboxes, but the text is not in alphabetical order. While there are plenty of examples for lists, finding examples for checkboxes has been challenging. http://jsfiddle.net/fG9qm/ <form> < ...

javascriptjqueryhtml

The droplist functionality in jQuery does not seem to be functioning properly within an ASP.NET MVC 5

After adding an external theme to my project and writing a script for listing data in a dropdown list on a separate page, I encountered an issue where the script works on other pages but not on the Layout theme page. HomeController Note: The partial view ...

htmljqueryasp.net-mvc

The grid layout in Bootstrap 4 does not seem to be compatible with dompdf

I am in the process of using dompdf for rendering a PDF file. Our application is built on Bootstrap 4 framework, and I want to incorporate it into the twig template used for generating our documents. However, I have encountered an issue with the Bootstrap ...

htmlcsspdfbootstrap-4dompdf

Having trouble aligning two divs on the same line and adjusting the controls to expand their width when there is extra space

I am currently creating an application using React and Material UI, incorporating the autocomplete control feature. Take a look at the code sandbox I have set up. Here are some concerns: I am aiming to have two autocomplete controls displayed on the same ...

cssreactjsmaterial-ui

Tips for entering Tamil characters in text boxes on a form field

Within my form, I have a set of text boxes. I am looking to input text in Tamil font for specific text boxes - around 5 out of the total 10 text boxes in the form. If you know how to enable Tamil font input for multiple text boxes (rather than just one as ...

javascriptphpjqueryhtmltamil

Implementing a color change for icons in React upon onClick event

export default function Post({post}) { const [like,setLike] = useState(post.like) const [islike,setIslike] = useState(false) const handler=()=>{ setLike(islike? like-1:like+1 ) setIslike(!islike) } return ( <> <div classNam ...

javascriptcssreactjsmaterial-ui

What could be causing the issue of not being able to load CSS files or images?

I'm currently in the process of learning how to develop websites, but I've encountered a stumbling block that I can't seem to overcome. I'm hoping someone here can help me out. I'm facing an issue where I am unable to link either a ...

htmlcssnode.jsexpressejs

Issue encountered while using Material-UI makeStyles: unable to access property 'down' due to being undefined

I'm currently in the process of developing my own website using Material-UI and I'm facing an issue with making it responsive. My goal is to hide an image on smaller screens by utilizing [theme.breakpoints.down('md')]. However, I keep e ...

cssreactjsmaterial-uijssmakestyles

Customizing the appearance of jQuery accordion components

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" language="javascript"></script> <script type="text/javascript" src="http://www.compactcourse.com/js/accordionNew.js" language="javascript"></script> < ...

javascriptjqueryhtmlwordpress

The functionality of CSS columns is not supported in Firefox browser

Currently, I am working on a web page design inspired by Pinterest. However, I have encountered an issue where the columns property is not functioning properly in Firefox. You can find the example I am trying to replicate here. Feel free to test it in Fir ...

htmlcssfirefox

Adjust the path of an element as it decreases in size

Sorry for the weird title, but that's likely why I can't find the solution on my own. I'm experimenting with CSS animations and I want the form element to decrease in height from 100px -> 0, but I want it to collapse from the top to the ...

javascripthtmlcsscss-transitions

The HTML attribute "hasbox" specifies the presence of a box within the element

I am currently working on resolving some rendering issues specifically in IE9 and have encountered a tag attribute that I am not familiar with - hasbox. Upon further investigation, it seems like IE is injecting this attribute at runtime as it does not app ...

javascripthtmlcss

Turn off the scroll function while loading a webpage

Here is the script for my preloader: $(window).load(function() { $("#loading").fadeOut(1000); I want to prevent scrolling while the "loading" is still visible, and then enable it again after the fade out completes. ...

javascriptjqueryhtmlscrollpreloader

Exploring techniques for creating realistic dimensions in CSS

My goal is to create a responsive website that accurately displays an object with specified dimensions, such as a width of 100mm, regardless of the user's screen resolution. However, I am facing challenges in achieving this consistency across all devi ...

javascripthtmlcssunits-of-measurementppi

p5.js experiencing issue: Uncaught TypeError - Unable to access property 'transpose3x3' due to null value

I have a simple website built with Flask where I am running several p5.js sketch animations, and everything is working smoothly. However, when I try to add a new sketch that utilizes WEBGL, I encounter the following error: Uncaught TypeError: Cannot read p ...

javascriptpythonhtmlflaskprocessing

The image I want to show is invisible on the CSS custom radio button

I'm having trouble creating a custom radio button that displays the image I want. The current setup doesn't seem to be working as expected. label { font-weight: lighter; cursor:pointer; } input[type="radio"] { display:none; } in ...

cssbuttonradio-button

Unable to open fancybox from a skel-layer menu

Seeking assistance with integrating a Fancybox inline content call from a Skel-layer menu (using the theme found at ) <nav id="nav"> <ul> <li><a href="#about1" class="fancybox fancybox.inline button small fit" >about< ...

javascriptphpjqueryhtmlfancybox

Can the style of certain words within a paragraph be altered using CSS only, without the need for any HTML tags?

Is it feasible to alter the appearance of certain words within a paragraph using CSS solely, without applying any HTML tags to those particular words? Awaiting a positive response. Thank you! ...

htmlcss

Using jQuery AJAX to preload GIF images for CSS background-image loading

For some time, I have been utilizing jQuery AJAX to preload GIF images with the following code: $("#images").html("<img id='loader' src='../img/ajax-loader.gif' />"); Now, I am attempting to achieve a similar effect (such as a s ...

jqueryajaximagepreloadercss

extracting data from a div while presenting a confirmation pop-up

I am attempting to extract information from a file on the following website. Specifically, I am trying to download an Excel sheet containing a complete directory of towns in TRIPURA, listed as the first item in grid format. Here is the code snippet I am ...

pythonhtmlselenium-webdriverweb-scrapinghref