CODEWITHSUNDEEP
htmlcss
Hudson Taylor
Hudson Taylor

Reputation: 1162

Checkbox Hack - Styling the Label

I am having trouble styling my label with a basic checkbox hack. When the check box is checked, I want the label's background to change to green. Howevever, I can't seem to find a CSS selector that styles an element that proceeds the specified element. I have tried using ~ and +. Here is my code: 

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  font-family: monospace;
}

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  position: relative;
  cursor: pointer;
  display: block;
  height: 70px;
  width: 70px;
  background: #eee;
  padding-top: 22px;
  border-radius: 1px;
  z-index: 1;
}

label span {
  display: block;
  height: 4px;
  width: 27px;
  background: #333;
  margin: 4px auto;
  border-radius: 1px;
}

nav {
  position: absolute;
  top: 0;
  opacity: 0;
  display: flex;
  background-color: #18bc9c;
  width: 100%;
  text-align: center;
  line-height: 80px;
  font-size: 2em;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease-in-out;
}

input[type=checkbox]:checked ~ nav {
  opacity: 1;
}

input[type=checkbox]:checked + label {
  background: #18bc9c !important;
}
<label for="nav">
  <span></span>
  <span></span>
  <span></span>
</label>
<input type="checkbox" id="nav">
<nav>
  <p>Home</p>
  <p>About</p>
  <p>Contact</p>
</nav>

Thanks for the help!

Upvotes: 1

Views: 592

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371231

The input doesn't need to come after the label for your checkbox function to work. Just switch the input and label in your HTML:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  font-family: monospace;
}

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  position: relative;
  cursor: pointer;
  display: block;
  height: 70px;
  width: 70px;
  background: #eee;
  padding-top: 22px;
  border-radius: 1px;
  z-index: 1;
}

label span {
  display: block;
  height: 4px;
  width: 27px;
  background: #333;
  margin: 4px auto;
  border-radius: 1px;
}

nav {
  position: absolute;
  top: 0;
  opacity: 0;
  display: flex;
  background-color: #18bc9c;
  width: 100%;
  text-align: center;
  line-height: 80px;
  font-size: 2em;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease-in-out;
}

input[type=checkbox]:checked~nav {
  opacity: 1;
}

input[type=checkbox]:checked+label {
  background: #18bc9c !important;
}
<input type="checkbox" id="nav">
<label for="nav">
  <span></span>
  <span></span>
  <span></span>
</label>
<nav>
  <p>Home</p>
  <p>About</p>
  <p>Contact</p>
</nav>
Run code snippetCopy snippet to answer

Upvotes: 2

Jesus Lugo
Jesus Lugo

Reputation: 796

There's no selector for the preceding element, just for the next element (or elements), so you need to work with the label after your input, not before.

Upvotes: 0

Related Questions