Apply CSS styles to the checkbox

Question

Apply CSS styles to the checkbox

I am new to CSS and I need help styling a checkbox element.

When the user selects one of the checkboxes, I want the background color to change to yellow.

Thank you for any assistance you can provide!

.radio_toggle {
  float:left;
}

.radio_toggle label {
  float:left;
  width:100px;
  overflow:auto;

}

.radio_toggle label span {
  text-align:center;
  font-size: 15px;
  padding:5px 0px;
  display:block;

}

.radio_toggle label input {
  position:absolute;
}

.radio_toggle .venue {
  background-color:#edf1f2;
  color: #58666e;
  min-height: 100% !important;
  border: thin #ced9db solid;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;

}

<div class="categories">
 <div class="radio_toggle">
    <label class="venue" style="">
      <input type="checkbox" name="toggle">
         <span>Category</span>
      </label>
  </div>
</div>
<div class="categories">
  <div class="radio_toggle">
    <label class="venue" style="">
       <input type="checkbox" name="toggle">
           <span>Category</span>
    </label>
  </div>
</div>
<div class="categories">
  <div class="radio_toggle">
       <label class="venue" style="">
           <input type="checkbox" name="toggle">
               <span>Category</span>
       </label>
  </div>
</div>

html css checkbox

Answer 1

Answer №1

To make the input disappear, apply the CSS rule display: none;

.radio_toggle label input {
  display: none;
}

To add color to the button, utilize the :checked selector in the CSS rule

.radio_toggle label input:checked + span {
  color: white;
  background: gold;
}

Example

.radio_toggle {
  float:left;
}

.radio_toggle label {
  float:left;
  width:100px;
  overflow:auto;

}

.radio_toggle label span {
  text-align:center;
  font-size: 15px;
  padding:5px 0px;
  display:block;

}

.radio_toggle .venue {
  background-color:#edf1f2;
  color: #58666e;
  min-height: 100% !important;
  border: thin #ced9db solid;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;

}

.radio_toggle label input {
  display: none;
}

.radio_toggle label input:checked + span {
  color: white;
  background: gold;
}

<div class="categories">
 <div class="radio_toggle">
    <label class="venue" style="">
      <input type="checkbox" name="toggle">
         <span>Category</span>
      </label>
  </div>
</div>
<div class="categories">
  <div class="radio_toggle">
    <label class="venue" style="">
       <input type="checkbox" name="toggle">
           <span>Category</span>
    </label>
  </div>
</div>
<div class="categories">
  <div class="radio_toggle">
       <label class="venue" style="">
           <input type="checkbox" name="toggle">
               <span>Category</span>
       </label>
  </div>
</div>

Answer 2

To make the input disappear, apply the CSS rule display: none;

.radio_toggle label input {
  display: none;
}

To add color to the button, utilize the :checked selector in the CSS rule

.radio_toggle label input:checked + span {
  color: white;
  background: gold;
}

Example

.radio_toggle {
  float:left;
}

.radio_toggle label {
  float:left;
  width:100px;
  overflow:auto;

}

.radio_toggle label span {
  text-align:center;
  font-size: 15px;
  padding:5px 0px;
  display:block;

}

.radio_toggle .venue {
  background-color:#edf1f2;
  color: #58666e;
  min-height: 100% !important;
  border: thin #ced9db solid;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;

}

.radio_toggle label input {
  display: none;
}

.radio_toggle label input:checked + span {
  color: white;
  background: gold;
}

<div class="categories">
 <div class="radio_toggle">
    <label class="venue" style="">
      <input type="checkbox" name="toggle">
         <span>Category</span>
      </label>
  </div>
</div>
<div class="categories">
  <div class="radio_toggle">
    <label class="venue" style="">
       <input type="checkbox" name="toggle">
           <span>Category</span>
    </label>
  </div>
</div>
<div class="categories">
  <div class="radio_toggle">
       <label class="venue" style="">
           <input type="checkbox" name="toggle">
               <span>Category</span>
       </label>
  </div>
</div>

Answer 3

Answer №2

After some advice from @UnknownDeveloper, it seems the best approach is to utilize JavaScript. Firstly, create a new class called .venue_selected and define your desired color schemes. Next, implement a click event for all elements in order to add the class to the label and check the respective checkbox.

<style type="text/css>
    .radio_toggle {
      float:left;
    }

    .radio_toggle label {
      float:left;
      width:100px;
      overflow:auto;

    }

    .radio_toggle label span {
      text-align:center;
      font-size: 15px;
      padding:5px 0px;
      display:block;

    }

    .radio_toggle label input {
      position:absolute;
    }

    .radio_toggle .venue {
      background-color:#edf1f2;
      color: #58666e;
      border: thin #ced9db solid;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      cursor: pointer;
    }

    .radio_toggle .venue_selected{
        background: #f9d342 !important;
        color: #ffffff !important;
    }

    .categories input[type="checkbox"] {
      display: none;
    }
</style>

<div class="categories">
    <div class="radio_toggle">
        <label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
    </div>
</div>

<div class="categories">
    <div class="radio_toggle">
        <label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
    </div>
</div>

<div class="categories">
    <div class="radio_toggle">
        <label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
    </div>
</div>

<script type="text/javascript>
    var elms = document.querySelectorAll("label.venue");
    elms.forEach(function(el,i) {
        el.onclick = function() {
            console.log(el);
            el.classList.toggle("venue_selected");
            el.querySelector("input[type='checkbox']").click();     
        }       
    });
</script>

Answer 4

After some advice from @UnknownDeveloper, it seems the best approach is to utilize JavaScript. Firstly, create a new class called .venue_selected and define your desired color schemes. Next, implement a click event for all elements in order to add the class to the label and check the respective checkbox.

<style type="text/css>
    .radio_toggle {
      float:left;
    }

    .radio_toggle label {
      float:left;
      width:100px;
      overflow:auto;

    }

    .radio_toggle label span {
      text-align:center;
      font-size: 15px;
      padding:5px 0px;
      display:block;

    }

    .radio_toggle label input {
      position:absolute;
    }

    .radio_toggle .venue {
      background-color:#edf1f2;
      color: #58666e;
      border: thin #ced9db solid;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      cursor: pointer;
    }

    .radio_toggle .venue_selected{
        background: #f9d342 !important;
        color: #ffffff !important;
    }

    .categories input[type="checkbox"] {
      display: none;
    }
</style>

<div class="categories">
    <div class="radio_toggle">
        <label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
    </div>
</div>

<div class="categories">
    <div class="radio_toggle">
        <label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
    </div>
</div>

<div class="categories">
    <div class="radio_toggle">
        <label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
    </div>
</div>

<script type="text/javascript>
    var elms = document.querySelectorAll("label.venue");
    elms.forEach(function(el,i) {
        el.onclick = function() {
            console.log(el);
            el.classList.toggle("venue_selected");
            el.querySelector("input[type='checkbox']").click();     
        }       
    });
</script>

Answer 5

Answer №3

To achieve this task, there are 2 different approaches you can take.

You have the option of utilizing either JavaScript or CSS to accomplish the desired effect.

If you opt for CSS, the process is quite straightforward. You will need to make use of the :checked attribute.

.radio_toggle[type=checkbox] + label {
  // Styling for when checkbox is not checked
} 
input[type=checkbox]:checked + label {
  // Styling for when checkbox is checked
}

On the other hand, if you choose to utilize JavaScript, you would first need to select the radio_toggle element and then create an event listener to trigger actions based on its checked state. In your scenario, the code snippet might look something like this:

var element = document.getElementsByClassName("radio_toggle").checked = true;
function check(element) {
    element.checked = true;
    element.style.color = "Desired color"
}

Answer 6

To achieve this task, there are 2 different approaches you can take.

You have the option of utilizing either JavaScript or CSS to accomplish the desired effect.

If you opt for CSS, the process is quite straightforward. You will need to make use of the :checked attribute.

.radio_toggle[type=checkbox] + label {
  // Styling for when checkbox is not checked
} 
input[type=checkbox]:checked + label {
  // Styling for when checkbox is checked
}

On the other hand, if you choose to utilize JavaScript, you would first need to select the radio_toggle element and then create an event listener to trigger actions based on its checked state. In your scenario, the code snippet might look something like this:

var element = document.getElementsByClassName("radio_toggle").checked = true;
function check(element) {
    element.checked = true;
    element.style.color = "Desired color"
}

Apply CSS styles to the checkbox

Answer №1

Answer №2

Answer №3

Similar questions

Extracting information from a hyperlink without the need to actually click on it

The contents of a Javascript array are not appearing within a div element

Aligning divs, prevent duplicate HTML within multiple divs

The Chocolat.js Lightbox plugin is experiencing issues with jQuery as it is unable to detect the

New design in TinyMCE V5: Vertical toolbar labels arranged within a CSS grid layout

Exploring Techniques for Streamlining HTML/CSS Editing in Browser

HTML5 allows users to play a extended video for a set duration without the need for any video editing. Users are encouraged to utilize any approach

Can you provide me with instructions on how to change the background image?

What are some methods to achieve consistent alignment of input fields across different mobile devices using CSS?

Is it possible to apply a style change to several components at once using a single toggle switch

Designing personalized sass components

Uniqid in React fails to generate unique IDs

Firefox triggers drag events while passing over a div scrollbar

Breadcrumb floating to the right, yet it still manages to obstruct other content, forcing it into a

Having trouble getting an Angular directive to bind a click event to an external element?

A guide on detecting overflow in a React functional component

sending a value from HTML to jQuery

Is there an HTML editing tool that has the ability to collapse code blocks by tags and rearrange them?

Adjust the header's alignment to seamlessly coincide with the uppermost part of the

Creating a flexible image layout within a container with relative positioning