当先例输入为空且未聚焦时隐藏元素

Question

是否可以使用 CSS/PostCSS (magic) 仅在目标输入聚焦且不为空时才显示后续元素？

当输入焦点集中时，我已经完成了一半的显示，但还不知道是否将焦点和空结合在一起？

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 伪类来实现这一点，但这在CSS 中也不是不可能的，但是，它是非常棘手的。 你应该使用:not(:valid)或:invalid伪类来实现这样的事情，所以要使用这个你还需要使你的input成为必需的（这是肯定的）。然后，当您使用此伪类时，无需检查输入是否在您的特定情况下获得焦点。

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>