Hide element when precedent input is empty and not focused

user_5314198 0
Viewed 182

Is it possible using CSS/PostCSS (magic) to show subsequent element only if the target input is focused and not empty?

I've achived half way to show it when input is focused, but can't figure out yet if it's a thing to combine focus and empty together?

input:not(:focus) + button {
  opacity: 0;
  pointer-events: none;
  touch-action: none;
}

input:not(:focus):not(:empty) + .notEmptyCase {
  opacity: 0;
  pointer-events: none;
  touch-action: none;
}
<p>Button gets visible when input is focused</p>
<input placeholder="Search">
<button>CLEAR</button>

<p>Button gets visible when input is focused and isn't empty</p>
<input placeholder="Search">
<button class='notEmptyCase'>CLEAR</button>

postcss css
1 Answers

Actually @Paulie_D is right, you can't use :empty pseudo-class to achieve this, but this is not impossible with CSS, however, it is very tricky to do. You should use :not (:valid) or :invalid pseudo-class to achieve such a thing, so for using this you also need to make your input required (This is for sure). Then when you use this pseudo-class there is no need to check if the input is focused or not in your particular case.

input:not(:focus) + button {
  opacity: 0;
  pointer-events: none;
  touch-action: none;
}

input:invalid + .notEmptyCase {
  opacity: 0;
  pointer-events: none;
  touch-action: none;
}
<p>Button gets visible when input is focused and isn't empty</p>
<input placeholder="Search">
<button class='notEmptyCase'>CLEAR</button>

<p>Button gets visible when input is focused and isn't empty</p>
<input type="text" placeholder="Search" required>
<button class='notEmptyCase'>CLEAR</button>

user_119085020
Related