0

I'm trying to achieve the following effect without using JS:

I have the following HTML:

  <div class="checkbox-wrapper">
    <input type="checkbox" />
  </div>
  <div class="code-wrapper">
    <input type="text" placeholder="hehe">
  </div>

And I want to apply display: none on the "code-wrapper" if the checkbox is checked. Also the other way - if the input being child of "code-wrapper" has any value (input.not(:placeholder-shown)) then i want to apply display: none on the checkbox-wrapper

Sadly the following is not working for me:

.code-wrapper {
  display: block;
}

.checkbox-wrapper {
  display: block;
}

.checkbox-wrapper input[type='checkbox']:checked ~ .code-wrapper {
  display: none;
}

.code-wrapper input:not(:placeholder-shown) ~ .checkbox-wrapper {
    display: none;
}

I've tried also with + instead of ~ but it doesn't do anything.

Please, teach me :D

byte210
  • 15
  • 3
  • 2
    It would require the usage of a parent-selector. However `:has()` still has limited support and is not supported by FF. They current only reliable method for productive use is the usage of JS. – tacoshy May 09 '23 at 07:56
  • Yes... Sadly I cannot use `:has()` for this exact reason :/ – byte210 May 09 '23 at 08:10

0 Answers0