仅当输入为空且未获得焦点时才选择伪元素？

Question

我的问题类似这样：Select label only if input is empty and not focused?

但这有点棘手，因为我需要选择输入字段的伪元素，如果：

• 输入框没有焦点
• 有些东西是有价值的

我无法访问 html。我想出了这个，但无论我尝试什么组合，它都没有选择我想要的方式。

<input type="text" id="filter" value="lp">

.container input#filter:not([value=""]):not(input:focus)::before {
  content:'';  
}

Answer 1

<input>

元素是 replaced element 并且根据 MDN 上的注释：

由

::before

和

::after

生成的伪元素包含在元素的格式化框中，因此不适用于replaced elements如

<img>

，或

<br>

元素。

这意味着无论你做什么，

::before

 伪元素永远不会显示，即使是像这样的良性东西：

input::before {
  content: 'foo';
}

不会有视觉效果。