(HTML & CSS) How have a checkbox appear when another checkbox is checked

Question

So I want to create something where if I check a checkbox (say Checkbox A), it will cause another fully-functioning checkbox (say Checkbox B) to appear. So far I managed to make the Checkbox B appear when Checkbox A is checked. However, if Checkbox B is clicked, nothing happens.

.arrowmenu {
  margin: 0 30px 0 0;
}

/* Arrow button */
label[for="togglearrow"] {
  background: url('arrow2.png') no-repeat;
  background-size: 100%;
  position: absolute;
  color: rgba(255, 255, 255, 0);
  bottom: 15px;
  left: 8px;
  font-size: 0px;
  line-height: 26px;
  display: none;
  width: 26px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hides checkbox */
#togglearrow {
  display: none;
}

#toggletasks {
  display: none;
}

label[for="togglearrow"] {
  display: block;
  cursor: pointer;
}

/* Tasks button that shows up when the arrow button is checked/clicked. */
label[for="tasks"] {
  cursor: pointer;
  position: absolute;
  background: url('tasks.png') no-repeat;
  background-size: 100%;
  /*display: none;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* This is the code that allows the user to click the arrow button to show the tasks button. */
#togglearrow:checked+label[for="tasks"] {
  background-size: 100%;
  display: block;
  text-decoration: none;
  font-size: 0px;
  height: 30px;
  width: 30px;
  bottom: 13px;
  left: 55px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label[for="tasksmenu"] {
  display: none;
  text-decoration: none;
  position: absolute;
  background-color: #131313;
  bottom: 250px;
  left: 250px;
  width: 610px;
  height: 540px;
}

/* This is the code that is supposed to allow the user to click the tasks button to open up a menu, however nothing happens when I click on the tasks button. */
#toggletasks:checked+label[for="tasksmenu"] {
  text-decoration: none;
  position: absolute;
  display: block;
  background-color: #131313;
  bottom: 250px;
  left: 250px;
  width: 610px;
  height: 540px;
}

<div class="arrow">
  <label for="togglearrow">.</label>
  <input type='checkbox' id="togglearrow" />

  <label for="tasks">.</label>
  <input type='checkbox' id="toggletasks">

  <label for="tasksmenu">test</label>

The code that is supposed to allow the user to click the tasks button to open up a menu, however, nothing happens when I click on the tasks button. the code that allows the user to click the arrow button to show the tasks button.

stackoverflow.com/q/8423217/7678788, this may help you

Chirag Jain
– Chirag Jain

2019-07-02 04:39:51 +00:00
Commented Jul 2, 2019 at 4:39 — Chirag Jain
– Chirag Jain, Commented Jul 2, 2019 at 4:39

Agustin Cornu · Accepted Answer · 2019-07-02 04:46:36Z

4

You can use the :checked selector with a precedence (~) selector like the snippet below

#checkbox-2 {
  display: none;
}

#checkbox-1:checked ~ #checkbox-2 {
  display: block;
}

<input type="checkbox" id="checkbox-1" />

<input type="checkbox" id="checkbox-2" />

answered Jul 2, 2019 at 4:46

Agustin Cornu

1965 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aurora123 Over a year ago

Thanks for the response, Agustin! The checkbox did work but for some reason, I can set the dimensions of the checkbox but not the background image. I used the code: "background: url('tasks.png') no-repeat;" under "#togglearrow:checked ~ #toggletasks {", but the background image is not changing. Do you have any suggestions? Thanks! :)

Agustin Cornu Over a year ago

Sadly, checkboxes cannot be styled. A frequent approach to "style" checkboxes is to put them inside a label, hide the actual input and show a div that changes depending on the current state of the checkbox, using the same selectors as my example. Check this codepen example codepen.io/agustinrhcp/pen/BgVGwL by using this approach, you can't no longer show another checkbox by checking the other's checked status, because they won't be siblings anymore. Your best solution there would be javascript.

Collectives™ on Stack Overflow

(HTML & CSS) How have a checkbox appear when another checkbox is checked

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related