Safari浏览器中:not(:placeholder-shown)伪类失效问题求助

我在使用CSS选择器input:not(:placeholder-shown):invalid时，发现该选择器在Safari浏览器中无法正常触发样式。以下是复现代码、使用Playwright模拟Safari的测试代码及步骤：

复现代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validation Example</title>
<style>
  input:not(:placeholder-shown):invalid {
    border-color: crimson;
  }
</style>
</head>
<body>
<form>
  <input type="email" placeholder="" required>
  <button type="submit">Submit</button>
</form>
</body>
</html>

使用Playwright模拟Safari测试的代码 #

const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch({ headless: false }); // 以非无头模式启动Safari
  const context = await browser.newContext(); // 创建新浏览器上下文
  const page = await context.newPage(); // 打开新页面

  // 设置HTML内容
  const content = `<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Form Validation Example</title>
  <style>
    input:not(:placeholder-shown):invalid {
      border-color: crimson;
    }
  </style>
  </head>
  <body>
  <form>
    <input type="email" placeholder="" required>
    <button type="submit">Submit</button>
  </form>
  </body>
  </html>`;

  await page.setContent(content); // 在页面中加载HTML内容
})();

测试步骤 #

• npm init -y
• npm install playwright
• node app.js

问题原因及解决方案 #

原因 #

Safari对空字符串placeholder=""的处理存在兼容性问题：当placeholder为空时，:placeholder-shown伪类的判断逻辑异常，即使输入内容后，仍可能被判定为“placeholder处于显示状态”，导致input:not(:placeholder-shown):invalid无法匹配到输入无效内容的状态。

解决方案 #

方案1：给placeholder设置不可见空格

将input的placeholder改为 （不可见空格），让Safari正确识别:placeholder-shown状态：

<input type="email" placeholder="&nbsp;" required>

方案2：结合:focus与:invalid增强匹配

如果不想修改placeholder内容，可以额外添加:focus状态的样式补充，确保用户交互时能看到无效提示：

input:not(:placeholder-shown):invalid,
input:focus:invalid {
  border-color: crimson;
}

方案3：JavaScript辅助状态判断

通过监听input的input事件，为输入过内容的元素添加自定义类，再结合CSS样式：

const input = document.querySelector('input[type="email"]');
input.addEventListener('input', () => {
  input.classList.toggle('has-content', input.value.length > 0);
});

input.has-content:invalid {
  border-color: crimson;
}

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