Modify the background hue of the checkbox to resemble a button when selected

Is there a way to create a checkbox that resembles a button in appearance? I have managed to achieve this, but I am facing an issue with changing the background color of the button when it is checked. Currently, the button turns light-grey when checked, but I want it to be blue instead. Below is the code snippet of my HTML and CSS. Any assistance would be greatly appreciated. Thank you in advance.

.checkboxes{
  cursor: pointer;
  z-index: 90;
  text-align: center;
  font-family: "Arial";
  font-weight: bold;
  font-size: 16px;
  color: #235988;
  width: 270px;
  margin: 5px;
  border-radius: 0px !important;
  border: 1px solid #235988 !important;
  padding-bottom: 5px;
 }

 .checkboxes:hover{
   background: #235988 !important;
   color: #FFF !important;
  }

  .form-check label input[type="checkbox"]:checked{
    background: #235988;
    color: #FFF;
  }


.form-check label input[type="checkbox"] {
  opacity:0;
}
<div class="col-md-12 form-check list-inline list-group-horizontal btn-group" role="group" data-toggle="buttons">
<label for="checkbox_select" class="col-md-3"> Please select one or many checkboxes </label>
      <div class="col-md-7">
        <label class="btn btn-default checkboxes">
          <input type="checkbox" name="checkbox_select" value = "1" class = "form-check list-group-item" id = "checkbox_select0" >  Checkbox1
        </label>
        <label class="btn btn-default checkboxes">
          <input type="checkbox" name="checkbox_select" value = "2" class = "form-check list-group-item" id = "checkbox_select1" >  Checkbox2
        </label>
        <label class="btn btn-default checkboxes">
          <input type="checkbox" name="checkbox_select" value = "3" class = "form-check list-group-item" id = "checkbox_select2" >  Checkbox3
        </label>
</div>

htmlcssbuttoncheckbox

Answer №1

To ensure proper functionality using the Adjacent sibling combinator, it is necessary to place your input element outside of the label as a sibling. Additionally, make use of the "for" attribute by referring to this resource.

.checkboxes{
  cursor: pointer;
  z-index: 90;
  text-align: center;
  font-family: "Arial";
  font-weight: bold;
  font-size: 16px;
  color: #235988;
  width: 270px;
  margin: 5px;
  border-radius: 0px !important;
  border: 1px solid #235988 !important;
  padding-bottom: 5px;
 }
.checkboxes:hover,
  .form-check input[type="checkbox"]:checked + label{
    background: #235988;
    color: #FFF;
  }

.form-check input[type="checkbox"] {
  opacity: 0;
}
<div class="col-md-12 form-check list-inline list-group-horizontal btn-group" role="group" data-toggle="buttons">
<label for="checkbox_select" class="col-md-3"> Please select one or many checkboxes </label>
      <div class="col-md-7">
        <input id="checkbox-1" type="checkbox" name="checkbox_select" value = "1" class = "form-check list-group-item" id = "checkbox_select0" >
        <label class="btn btn-default checkboxes" for="checkbox-1">
            Checkbox1
        </label>
        <input id="checkbox-2" type="checkbox" name="checkbox_select" value = "2" class = "form-check list-group-item" id = "checkbox_select1" >
        <label class="btn btn-default checkboxes" for="checkbox-2">
            Checkbox2
        </label>
         <input id="checkbox-3" type="checkbox" name="checkbox_select" value = "3" class = "form-check list-group-item" id = "checkbox_select2" >
        <label class="btn btn-default checkboxes" for="checkbox-3">
           Checkbox3
        </label>
</div>

Answer №2

There are multiple solutions available, but I will share just one with you.

  1. To hide the input, set the CSS display property to none.
  2. Create a toggle button using a span or div element.
  3. Add a JavaScript function to the onclick attribute of the div element. This function will toggle the visibility of the hidden input element.

However, a simpler solution would be to use a framework such as Vue or Angular.

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

Convert JSON data without backslashes using json_encode

I am having an issue where I retrieve a JSON encoded array from the database, modify one field, and then save it again. However, when I use json_encode, it removes the backslashes and as a result, the text is not displayed correctly on my site. $data_de=j ...

phphtml

Having Trouble Styling Radio Buttons with CSS

Hello, I'm facing an issue with hiding the radio button and replacing it with an image. I was successful in doing this for one set of radio buttons, but the second set in another row is not working properly. Additionally, when a radio button from the ...

javascriptjqueryhtmlcss

Capture the onclick attribute with jQuery and then reapply it

I am facing a challenge with a page that has several calendars composed of HTML tables where each day is represented by a td. The td elements have an onClick attribute which I need to manipulate using jQuery. Specifically, I need to remove the onClick attr ...

javascriptjqueryhtml

Putting Text Inside a Video Player in HTML

Is there a way to insert text, like a Logo, into my video player? I would appreciate any help on how to achieve this. Thank you. <video width="320" height="240" controls src="video/flashtrailer.mp4"> Your browser does not support the video tag. & ...

javascripthtml

The Chrome browser is failing to detect the hover function of the Surface Pen stylus

Encountering an issue with the hover pseudo-class not functioning properly on Surface pad's Chrome browser. The hover effect is working as expected in other browsers, but not in Chrome. I am using a Surface pen to test the hover functionality. HTML: ...

htmlcss

Is it a scope issue if ng-click is not firing and the function is not working properly?

I'm facing an issue with an animation that is not working as intended. The goal is to have the search button trigger an animation to pull a search bar from the right side, allowing users to input their search query. However, the ng-click function does ...

javascriptjqueryhtmlasp.netangularjs

Current page with animated CSS3 menus

I found a cool menu example on this webpage: http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index10.html. I want to modify it so that the current page's menu item has a different color from the others. For example, when I'm on the home ...

jqueryhtmlcss

The unexpected behavior of nesting in CSS class selectors

Here is a paragraph element I'm working with: <p class='big bold'>Some random text</p> I attempted to style it using the following code: p .big{ font-size:60px; } p .bold{ font-weight:bold; } Unfortunately, the stylin ...

htmlcsscss-selectors

Controlling the Flow of Events in JavaScript Documents

Explore the integration of two interconnected Javascript files and delve into managing event propagation between them effectively. 1st js file var red = [0, 100, 63]; var orange = [40, 100, 60]; var green = [75, 100, 40]; var blue = [196, 77, 55]; var ...

javascriptjqueryhtml

Calculating JS functions before images are loaded

Following up on a previous question, I am utilizing JavaScript code from another article to position a "content" div relative to a fixed div in my project. However, the issue arises when the positioning of the "content" div is calculated only after all the ...

javascriptjqueryhtml

Achieve consistent column heights with flexbox styling

I have a solution for achieving equal height columns using the CSS property display:table. Here is an example: .row { display: table; width: 100%; } .col{ display: table-cell; } However, in my case, I am using flexbox and the row class has ...

htmlcssflexbox

Gaining a comprehensive understanding of media queries

Hello everyone, I need some help with media queries. I've been working on a website that is already responsive. However, I am required to write the code in a child theme rather than directly in the original files. When I attempt to add new media quer ...

htmlcssmedia-queries

How can I display a popup window within an iframe on a separate full page?

I am facing an issue while creating an HTML table using AngularJS with a popup. The problem is that I want the popup window, which shows a graph, to open up on the entire page instead of in a specific div. My desired output should look like this: Currentl ...

javascripthtmlangularjs

Guide on centering an unfamiliar element in the viewport using HTML, CSS, and JavaScript

In the process of developing my VueJS project, I have successfully implemented a series of cards on the page. However, I am now facing a challenge - when a user selects one of these cards, I want it to move to the center of the screen while maintaining its ...

javascripthtmlcssdom

Minimizing the use of line breaks in HTML to enhance visual design characteristics

While working with Bootstrap and HTML to construct a website, I have frequently resorted to using line breaks in the code for design purposes. However, I believe there must be a more professional approach to achieve the desired layout. For instance, on ...

htmltwitter-bootstrap

A tutorial on converting a tree structure into a JSON object using jQuery

Struggling to create a JSON object from the tree class, specifically needing only the span values. The structure of the tree is dynamic and nested, so utilizing a recursive function seems like the most suitable approach. Currently able to extract the keys ...

jqueryhtml

Utilizing Fancybox with a polymer paper-card: A step-by-step guide

I have a collection of paper-cards and I am looking for guidance on integrating the fancybox library to display the content of each paper-card. Here is a sample of a paper-card: <paper-card heading="Emmental" image="http://placehold.it/350x150/FF ...

htmlcsspolymerfancybox

Connect the front end files, including HTML, CSS, and JavaScript, to the Node.js backend

I'm a beginner in web development and recently completed an online course on node.js and express. However, the course didn't cover how to add HTML, CSS, and JS files when using Node. I attempted the following: var express = require('expres ...

javascripthtmlcssnode.jsexpress

Automatically resizing font to fit the space available

I am attempting to achieve the task described in the title. I have learned that font-size can be set as a percentage. Naturally, I assumed that setting font-size: 100%; would work, but unfortunately it did not. For reference, here is an example: http://js ...

javascripthtmlcssfontsfont-size

Using CSS alone, incorporate two images within a section in HTML5

Is there a way to add two images inside a section using CSS to make them look like this: https://i.sstatic.net/74JSK.png However, the only result I can achieve with CSS looks like this: https://i.sstatic.net/TWrSR.png I could use divs in HTML and add th ...

htmlcss