当先行输入为空且未获得焦点时隐藏元素

Question

是否可以使用 CSS/PostCSS（魔术）仅在目标输入为焦点且不为空时显示后续元素？

当输入聚焦时，我已经完成了一半来显示它，但还不知道是否可以将聚焦和空结合在一起？

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>

Answer 1

其实@Paulie_D是对的，不能用: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伪class来实现这样的事情，所以对于使用这个你还需要使你的 input 成为必需的（这是肯定的）。然后，当您使用此伪 class 时，在您的特定情况下无需检查输入是否聚焦。

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>

当先行输入为空且未获得焦点时隐藏元素

Hide element when precedent input is empty and not focused

css

postcss