Checkbox Hack - Styling the Label

Question

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!

score 2 · Accepted Answer · answered Mar 02 '17 at 20:19

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

Thank you! This helps a lot. – Hudson Taylor Mar 02 '17 at 20:19 — Hudson Taylor, Mar 02 '17 at 20:19

score 0 · Answer 2 · answered Mar 02 '17 at 20:16

0

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.

answered Mar 02 '17 at 20:16

Jesus Lugo

787
6
15

Checkbox Hack - Styling the Label

2 Answers2