0

I am trying to make a checkbox I made into a button highlight its border and background on click but its not working.enter image description here

This is what is happening enter image description here

and this is my code

<div id="ck-button">
                  <label id="label">
                    <input id="checkbox" type="checkbox" value="1" />
                    <span className="title">Respirators</span>
                    <span className="description">
                      Surgical N95 or equivalent
                    </span>
                  </label>
                </div>

css

#ck-button label {
  width: 85%;
  border: 2px solid #eaf2fd;
  padding: 15px;
  border-radius: 3px;
  display: flex;
}

#ck-button label span {
  padding: 3px 0px;
}
#ck-button .title {
  color: #304256;
  font-weight: 600;
  font-size: 1em;
}
#ck-button .description {
  color: #6984a3;
  font-weight: 400;
  margin-left: 7px;
  font-size: 15px;
}
#ck-button label input {
  position: absolute;
  top: -20px;
}

#ck-button input:checked + span {
  color: #2f80ed;
}

#ck-button input:checked ~ #label {
  background-color: red;
}

I've also tried this but it's not working

#ck-button input:checked + label {
  background-color: red;
}
Adoga Patricia
  • 119
  • 1
  • 4
  • 16
  • 1
    As long as ` – Sirko May 30 '20 at 12:23
  • well the label is the parent so you can not nest it like that and there is no css rule to change parent. The checkbox would have to be `` – epascarello May 30 '20 at 12:23
  • to lay the input as a sibbling before the label, you have to use the attribute `for` to link them. https://stackoverflow.com/questions/12894169/what-is-the-html-for-attribute-in-label – G-Cyrillus May 30 '20 at 12:28
  • Have you look at this answer: https://stackoverflow.com/a/7642335/9620269 – Rene May 30 '20 at 12:44
  • 1
    @adoga-patricia you can also try this [solution](http://jsfiddle.net/049gvzao/) – Rene May 30 '20 at 13:24

0 Answers0