Question 42809 in Html Question posted in
Some basic documentation can be found here.

Change the label background-color when a checkbox is checked – Html

I want to implement a static checkbox (without query/script/function) like this:

By clicking the checkbox box, it should change to that brown color (like the name box), and by clicking again it goes to normal (like price)

enter image description here

.checkbox-round {
  width: 45px;
  height: 30px;
  /*background-color: white !important;*/
  border-radius: 5px !important;
  /*background-color: white;*/
  vertical-align: middle;
  /*border: 3px solid #ddd;*/
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}

.checkbox-round:checked {
  background-color: #A97B47 !important;
}
<label>
  <input id="filterByName" type="checkbox" checked class="col-md-4 col-sm-6 col-12 button checkbox-round" name="filterByName"  value="name" placeholder="name">
  name
</label>
Tags:

2

Answers


  1. 0
    1. move the input outside the label
    2. add the for attribute to the label to connect it to the checkbox
    3. hide the checkbox with display: none
    4. style the label instead of the checkbox
    5. Apply the background-color and color changes by using the + combinator
    input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + label {
  background-color: #A97B47;
  color: white;
}

label {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: 5px;
}
    <input id="filterByName" type="checkbox" name="filterByName"  value="name" placeholder="name" checked>
<label for="filterByName">name</label>

    PS: As @CBroe already said in the comments. It should be radio buttons as you can only sort by 1 selection not multiple. The technique remains the same.

    Login or Signup to reply.
  2. 0

    Use the :has() test on your css

    .checkbox-round {
  padding:10px 15px;
  /*background-color: white !important;*/
  border-radius: 5px !important;
  /*background-color: white;*/
  vertical-align: middle;
  /*border: 3px solid #ddd;*/
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}

input{
  appearance: none;
  display:none;
}

.checkbox-round:has(> input:checked){
  background-color: #A97B47 !important;
  color:white;
 }
    <label class="checkbox-round">
  <input type="checkbox" checked name="checkbox"/>
  Name
</label>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search