CODEWITHSUNDEEP
htmlcssbuttoncheckbox
Mohammed Sayer
Mohammed Sayer

Reputation: 141

Change background color of the checkbox which looks like a button when checked

I am trying to create a checkbox which looks like a button, I am able to get it done but the only problem I am having is I am not able to change the background color of the button when it's checked. Currently when I check the checkbox the button becomes light- grey I want it to be blue, here is the snippet of my HTML and CSS. Any help is appreciated, Thanks 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>

Upvotes: 1

Views: 689

Answers (2)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

You need to put your input outside the label as a sibling (since we will use the Adjacent sibling combinator ) and use the "for" attributer

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

Upvotes: 2

ぽんじゅ Ponju
ぽんじゅ Ponju

Reputation: 1

I think there are many solutions. I introduce you just one of them.

  1. Hide the iuput by setting css display property none.
  2. Make a toggle button looks you like as span or div element.
  3. Attach js function on div element onclick attrbute. Function toggles option of hidden iuput element.

But Ithink more ez way is to use some flamework, like Vue,Angular,and so on.

Upvotes: 0

Related Questions