如何在输入框非聚焦且有值时选中其伪元素？

先明确两个核心问题，这是你代码无效的关键：

1. input元素默认不支持伪元素：绝大多数浏览器将input视为替换元素，无法直接为它添加::before/::after伪元素。
2. CSS选择器的两处错误：
   • :not(input:focus)写法冗余，前面已经选中input#filter，直接写:not(:focus)即可；
   • [value=""]仅匹配HTML属性中的初始值，无法实时响应用户输入后的内容变化——用户修改内容后，DOM的value属性不会自动更新，这个选择器只能判断初始状态，不具备实用性。

可行方案（无需修改HTML） #

方案1：利用父元素伪元素模拟（纯CSS实现）

如果input在.container容器内，可以借助容器的伪元素模拟input的伪元素效果，同时用:not(:focus)和:not(:placeholder-shown)组合判断条件（后者需要input带有placeholder属性，若原HTML没有，可通过JS动态添加空占位符）：

/* 若原input无placeholder，用JS动态添加 */
/* document.getElementById('filter').setAttribute('placeholder', ' '); */

.container:has(input#filter:not(:focus):not(:placeholder-shown))::before {
  content: '';
  /* 调整位置到input对应区域 */
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background: red; /* 示例样式 */
}

:not(:placeholder-shown)表示输入框有内容（占位符未显示），:not(:focus)表示未聚焦，:has()选择器用来判断容器内的input是否满足这两个条件，再通过容器伪元素模拟input的伪元素效果。

方案2：JS配合类名（兼容性更好）

如果需要兼容不支持:has()的浏览器，用JS监听输入事件，给有内容的input添加类名，再通过CSS选中：

const filterInput = document.getElementById('filter');
// 初始化判断类名
toggleHasValueClass(filterInput);
// 监听输入变化
filterInput.addEventListener('input', () => toggleHasValueClass(filterInput));

function toggleHasValueClass(input) {
  input.value.trim() !== '' 
    ? input.classList.add('has-value') 
    : input.classList.remove('has-value');
}

/* 仍需借助父元素伪元素模拟，因为input本身不支持伪元素 */
.container:has(input#filter.has-value:not(:focus))::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background: blue; /* 示例样式 */
}

关键提醒 #

• 不要尝试直接给input加伪元素，这是浏览器的固有限制，无法绕过；
• 纯CSS实现需确保浏览器支持:has()和:placeholder-shown（现代浏览器基本都支持）；
• 用[value=""]判断输入内容不可靠，必须用:placeholder-shown或JS动态判断。

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