Pure CSS change styling of div element with checkbox

Question

I'm trying to toggle the CSS of a sibling by using the checked state of a sibling checkbox.

Is it possible to target elements anywhere on the page from the checked pseudo class from a checkbox?

I'm trying to avoid using any javascript.

https://codepen.io/dyk3r5/pen/WOmxpV?editors=1111

html,
body {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  justify-content: center;
}

label {
  color: #000;
  font-weight: 600;
  height: 25px;
  padding: 5px 10px;
  border-bottom: 2px solid lightgrey;
  margin: 5px 1px;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + label {
  border-bottom: 2px solid red;
}

input[type="radio"]:checked > div p {
  display: none;
}

<div class="container">
  <div id="new-account">
    <input type="radio" id="opt1" name="radiolist" checked>
    <label for='opt1'>New Account</label>
    <div class="content">
      <p>Lorem Ipsum</p>
    </div>
  </div>

  <div id="existing-account">
    <input type="radio" id="opt2" name="radiolist">
    <label for='opt2'>Existing Account</label>
    <div class="content">
      <p>Lorem Ipsum 2</p>
    </div>
  </div>
</div>

Ha ha! Its there! ;-) Im a back end dev, as you can propbably imagine. Is it even possible to target a div like this by its id? — Derek
– Derek, Commented Jul 14, 2017 at 10:14
Your question says "toggle the CSS of a sibling" and then it says "target elements anywhere on the page". Which are you interested in? — user663031
– user663031, Commented Jul 14, 2017 at 18:12

norin89 · Accepted Answer · 2017-07-14 10:13:04Z

1

Your mistake is in this line:

input[type="radio"]:checked > div p

your div element is not a "direct children" of input element. What you need here is "general sibling selector" to address any following div sibling.

So it should be:

input[type="radio"]:checked ~ div p

answered Jul 14, 2017 at 10:13

norin89

4823 silver badges8 bronze badges

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

Comments

ankita patel · Accepted Answer · 2017-07-14 10:12:32Z

0

Use css like

input[type="radio"]:checked + label + .content p {
  display: none;
}

edited Jul 14, 2017 at 10:12

user663031

answered Jul 14, 2017 at 10:10

ankita patel

4,2511 gold badge15 silver badges28 bronze badges

1 Comment

user663031 Over a year ago

Instead of hard-wiring the dependency on the intermediate label element, you'd be better off using the general sibling combinator ~.

Collectives™ on Stack Overflow

Pure CSS change styling of div element with checkbox

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related