input:not(:empty) 不生效：输入框有值时设置背景色失败

嗨，这个问题我之前踩过坑，核心原因是你误解了CSS :empty伪类的作用逻辑！

问题根源：:empty的作用对象不是input的value属性 #

:empty伪类的判断依据是元素内部是否存在子节点（包括文本节点、注释节点），而<input>是自闭合标签，它的内部永远没有任何子节点——不管你在输入框里输入了什么内容，这些内容都存在于input的value属性中，而不是元素的内部内容里。

所以：

• input:empty会匹配所有input元素（因为它们内部永远是空的），不管value有没有值；
• 对应的input:not(:empty)自然永远匹配不到任何元素，所以设置的绿色背景不会生效。

正确的实现方案 #

这里给你两种靠谱的解决思路：

方案1：使用:placeholder-shown伪类（纯CSS） #

:placeholder-shown伪类会匹配占位符文本正在显示的input，也就是输入框为空的状态。反过来，:not(:placeholder-shown)就是输入框有内容的状态。

注意：需要给input设置placeholder属性，哪怕是空字符串也可以。

示例代码：

/* 空状态：白色背景 */
input:placeholder-shown {
  background-color: white;
}

/* 非空状态：绿色背景 */
input:not(:placeholder-shown) {
  background-color: green;
}

<input type="text" placeholder="">

方案2：JavaScript监听输入事件（兼容性更全） #

如果需要兼容不支持:placeholder-shown的旧浏览器（比如IE），可以通过JS监听input的input或change事件，动态给输入框添加/移除类：

示例代码：

input {
  background-color: white;
}
input.has-value {
  background-color: green;
}

const input = document.querySelector('input');
input.addEventListener('input', function() {
  this.classList.toggle('has-value', this.value.trim() !== '');
});

内容的提问来源于stack exchange，提问作者MarkNsu