这问题我之前也踩过坑！核心原因是IE完全不支持:placeholder-shown伪类，旧版Edge（基于EdgeHTML内核的版本）同样不支持，所以你写的选择器在这些浏览器里直接“隐身”了。下面给你两个兼容性拉满的替代方案，按需选就行：

方案1：JavaScript监听输入状态（最灵活，推荐） #

这个方案不受输入框属性限制，所有浏览器都能跑，逻辑也清晰：

第一步：修改CSS，用类选择器替代伪类 #

把原来依赖:placeholder-shown的选择器换成自定义类，比如has-content：

.main-header .search-input.has-content + .search-button, 
.main-header .search-input:focus + .search-button { 
  background: #00a0ff; 
}

第二步：添加JS监听输入状态 #

通过监听输入框的输入、聚焦、失焦事件，判断输入框是否有内容，动态添加/移除has-content类：

const searchInput = document.querySelector('.main-header .search-input');

// 封装切换样式的函数
function toggleButtonStyle() {
  // 用trim()排除纯空格的情况
  searchInput.classList.toggle('has-content', searchInput.value.trim() !== '');
}

// 页面加载时先检查一次初始状态
toggleButtonStyle();

// 绑定事件监听
searchInput.addEventListener('input', toggleButtonStyle);
searchInput.addEventListener('focus', toggleButtonStyle);
searchInput.addEventListener('blur', toggleButtonStyle);

这个方案的优势是兼容性覆盖所有浏览器（包括IE11），而且不管你的搜索框是否需要必填，都能正常工作。

方案2：利用:valid伪类（仅限必填输入框） #

如果你的搜索输入框本身就需要用户填写（可以加required属性），那可以用:valid伪类来替代，因为当必填输入框有内容时，会自动触发:valid状态：

第一步：给输入框添加required属性 #

修改HTML：

<input type="text" class="search-input" placeholder="搜索..." required>

第二步：修改CSS选择器 #

把原来的:not(:placeholder-shown)换成:valid：

.main-header .search-input:valid + .search-button, 
.main-header .search-input:focus + .search-button { 
  background: #00a0ff; 
}

注意：这个方案有局限性——如果输入框允许用户留空，那:valid就不适用了，因为空的时候输入框会是:invalid状态，不符合你的需求。

总结 #

优先选方案1，兼容性和灵活性都拉满；如果你的场景刚好符合必填要求，方案2可以省掉JS代码。

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