CODEWITHSUNDEEP
htmlcsscss-selectors
Adoga Patricia
Adoga Patricia

Reputation: 129

How to make a checkbox into a button

I am trying to achieve this with only css, and make it clickable/ active the answers have not been so helpful, what will the css specificity part be? enter image description here

#ck-button {
  margin-bottom: 1rem;
}

#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;
}
<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>

this is the link on js fiddle for a proper look https://jsfiddle.net/oLa4162h/

Upvotes: 1

Views: 301

Answers (1)

ROOT
ROOT

Reputation: 11622

You can have it like this using + CSS Adjacent sibling combinator combined with :checked CSS selector for checkbox, note that I did a small change to the HTML and css, I added a container div right next to the <input> and applied the CSS to it:

#ck-button {
  margin-bottom: 1rem;
}

#ck-button .container {
  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;
}

#checkbox:checked + .container {
  border: 2px solid #2F81ED;
  color: #2F81ED;
  background-color: #F5F8FD;
}
<div id="ck-button">
  <label id="label">
    <input id="checkbox" type="checkbox" value="1" />
    <div class="container">
      <span className="title">Respirators </span>
      <span className="description">
        Surgical N95 or equivalent
      </span>
    </div>
  </label>
</div>

Upvotes: 1

Related Questions