Adjusting the Color of the Checkbox when Selected

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

I'm curious about how we can make all selected checkboxes display with the same color. I attempted to use the following CSS:

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

but unfortunately, it didn't work as expected.

htmlcssbootstrap-4

Answer №1

Adjusting the color of checkboxes in their active state requires careful consideration of the specificity of your custom CSS compared to Bootstrap rules.

Here is a functional code snippet with the necessary custom CSS overrides that only modify button colors without affecting focus glow:

Click the "run code snippet" button below to see it in action:

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

Answer №2

Check out this awesome demonstration on Bootply. It showcases unique Bootstrap checkbox styles where the color changes to green when clicked instead of the default black. Feel free to customize it to suit your requirements.

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

Change to a dark theme using React hooks in typescript

Hello, I am new to React and English is not my first language, so please excuse any mistakes. I have been trying to enable a dark mode feature on my website. Most examples I have found involve toggling between dark and light modes where you need to specify ...

javascriptcssreactjstypescript

Access an HTML webpage using a PHP function

Recently, I delved into learning PHP and a question popped up in my mind: I have this PHP file that consists of a function named `sqlConnect();` This function checks if the user is already logged into the MySQL DB. If not, it redirects the user to an HT ...

phphtmlmysql

What is the best way to center a blog title on the screen?

Being a beginner in the world of blogging, I am looking to make some changes to my blog layout. Currently, my blog title is situated at the top-left corner but I would like it to be positioned in the middle of the screen with the description below the imag ...

htmlcssblogsbloggertitle

Unable to see the tokens on the connect four board when using Javascript and HTML

I'm currently developing a game of connect four using javascript, html, and css. I'm encountering an issue with the refreshGrid() function in game.js. At the moment, when I run my html file, I only see an empty board. The function is meant to ena ...

javascripthtmlcssarraysfunction

Tips for optimizing character count for mobile web pages with varying screen sizes and font settings

As I embark on developing an eBook mobile app, I am faced with various considerations such as screen size, font size, and determining the number of paragraphs to include on a single page based on the current screen and font settings. My aim is to adjust t ...

javascripthtmlcsscordova

Learn the technique for submitting a checkbox value regardless of its disabled status

I'm currently working on a web page that displays order invoices with pricing. Users can select items by checking the checkboxes and clicking submit. I want to restrict users from unchecking the items once they are selected, and the form should only w ...

phphtml

Encountering issues with the initial click modal failing to open in .NET 5 Blazor server-side implementation

Upon initially loading a page, the first click on any card does not open the modal window. However, subsequent clicks will launch the modal as expected. I am unsure of what is causing this issue. <div class="card-columns"> @foreach (var ...

asp.netbootstrap-4blazorblazor-server-side.net-5

The initial child expands in width according to the content until it reaches the boundaries of the parent, triggering the

My goal is to achieve a layout where the parent container's width can vary. The first child element (red) should expand based on its content until it reaches the end of the parent, at which point text-overflow: ellipses should be applied. The second c ...

htmlcss

CSS confusion: What's causing the header to not align horizontally and the footer to not justify evenly spaced?

I am new to coding and experimenting with CSS flexbox to design a responsive layout. I am struggling with aligning the header elements horizontally in the widest viewport and adjusting the footer to space out evenly. For the header, I attempted using disp ...

htmlcssalignment

"Exploring the process of integrating a controller into an external HTML file using AngularJS

I'm relatively new to AngularJS. In my web app, I have a set of buttons: index.html <button class="aButton">a</button> <button class="bButton">b</button> <script> $(document).ready(function(){ $(".aButton"). ...

javascripthtmlangularjsiframe

php query that does not include the var= parameter

I want the visitors of my website to be able to access user statistics on a different site by simply entering example.com/user/user_name without needing to add a parameter like example.com/user/username=user_name. Since I don't know all potential user ...

phphtmlhttp-status-code-404

Animating the Bookmark Star with CSS: A Step-by-Step Guide

I found this interesting piece of code: let animation = document.getElementById('fave'); animation.addEventListener('click', function() { $(animation).toggleClass('animate'); }); .fave { width: 70px; height: 50px; p ...

javascripthtmlcssanimation

Utilizing multiple dropdown buttons in navigation menu items with Bootstrap 4

Trying to find a solution for having sub menus within the menu items. There are 2 dropdown buttons (Reports and Views) within a menu item that is itself a dropdown item. Clicking on the first button displays the submenu below, but clicking on the second ...

csstwitter-bootstraptwitter-bootstrap-4

Troubleshooting my CSS navigation bar - What am I missing?

I've been developing a navigation bar using a combination of HTML, CSS, and JavaScript. After writing the code and setting the display of the bar to fixed, I encountered an issue where the content of the page was overlapping the nav bar. Below you&ap ...

javascripthtmlcssnavigationbar

How can CSS be used to center multi-line text with the shortest line appearing at the top

I'm currently working on some html and css code that looks like this: <div style="width: 40em; text-align: center;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard du ...

htmlcsstextalignment

Can you extract the value of a button by copying and pasting it as

Can someone help me figure out how to copy and paste the text within an HTML button into Excel? The table was created by a clever web developer who used links as buttons, making it tricky for me to extract the information I need. Here is an example of the ...

htmlformsinput

Tips for creating a table with HTML

https://i.sstatic.net/f2nTP.png I'm looking to create a table that resembles the image above. If anyone has suggestions or ideas on how I can achieve this design, please feel free to share. Thank you, Ashraf ...

html

What causes Next.JS to automatically strip out CSS during the production build process?

Encountering unpredictability in CSS loading while deploying my Next.JS site. Everything appears fine locally, but once deployed, the CSS rules seem to vanish entirely. The element has the attached class, yet the corresponding styling rules are nowhere to ...

javascriptcssreactjswebpacknext.js

What is the best way to incorporate CSS conditions within a function?

After creating a filter function in React to organize images by category, I encountered an issue where the filtered images weren't centered as I wanted them to be. I am now looking for a way to integrate centering into the filtering process so that wh ...

javascripthtmlcssreactjs

What causes jquery-ui resizable to set the width of the div with the "alsoResize" property?

I have created a series of divs structured like this: <div id="body_container"> <div id="top_body"> </div> <div id="bottom_body"> </div> </div> Additionally, I have implemented the following funct ...

javascriptcssjquery-ui