css 表单未填写时提示用户怎么办_使用 placeholder shown 伪类

CSS中不存在:shown伪类，::placeholder仅用于样式化占位符文本；检测“未填写”应结合required属性、:user-invalid伪类及JavaScript校验。

placeholder 伪类不支持 :shown，根本不存在这个选择器

CSS 里没有 :shown 这个伪类，更不存在 ::placeholder:shown 这种写法。浏览器完全忽略它，写了也没效果。placeholder 文本的显示/隐藏由表单控件自身控制（比如 有值时自动隐藏），CSS 无法监听“是否正在显示”这个状态。

::placeholder 只能样式化占位文字本身

::placeholder 是一个伪元素，仅用于设置 placeholder 文本的样式（颜色、字体、透明度等），它不反映输入状态，也不触发重绘逻辑。常见误用是想靠它“检测未填写”，但这是 JavaScript 才能做的事。

• 支持的写法：::placeholder、::-webkit-input-placeholder、::-moz-placeholder（兼容性需按需加前缀）
• 不支持状态判断：不能和 :focus、:valid、:empty 等组合出“未填时高亮边框”这类逻辑
• 透明度可调但无意义：设 opacity: 0.3 可以让占位符变淡，但这和“是否已填”无关

真正检测“未填写”的推荐做法是结合 :invalid 和 :user-invalid

原生 HTML 表单验证机制才是可靠方案。给 加 required 属性后，浏览器会在提交前标记为空字段为 :invalid；用户交互后（如失焦），还会触发 :user-invalid，更适合做实时提示。

input:invalid:not(:placeholder-shown) {
  border-color: #d32f2f;
}
input:user-invalid {
  border-color: #d32f2f;
}
input:valid {
  border-color: #4caf50;
}

• :placeholder-shown 是真实存在的伪类，表示 placeholder 正在显示（即输入框为空且没聚焦）——但它不是“未填写”的充分条件（比如用户输空格后 placeholder 隐藏，但实际仍为空）
• 优先用 :user-invalid，它比 :invalid 更精准：只在用户操作过且验证失败时生效，避免页面刚加载就红边
• 注意 type="number" 或 type="email" 等类型会额外触发格式校验，可能掩盖空值判断

需要动态提示文案？必须用 JavaScript 监听 input 或 blur

CSS 无法插入或切换提示文字（比如在输入框下方显示“请填写邮箱”）。这类交互必须靠 JS 控制 DOM 或 class：

const emailInput = document.querySelector('input[type="email"]');
const hintEl = document.querySelector('.hint');

emailInput.addEventListener('blur', () => {
  if (!emailInput.value.trim()) {
    hintEl.textContent = '请填写邮箱';
    hintEl.classList.add('error');
  } else if (!emailInput.checkValidity()) {
    hintEl.textContent = '邮箱格式不正确';
    hintEl.classList.add('error');
  } else {
    hintEl.textContent = '';
    hintEl.classList.remove('error');
  }
});

• 别只监听 input 事件：用户可能粘贴后立刻提交，blur 更稳妥
• 用 checkValidity() 而非正则手动校验，复用浏览器内置逻辑
• 清空提示时务必移除 error class，否则样式残留

实际项目中，placeholder 样式只是锦上添花，表单有效性判断和提示必须依赖 HTML required + :user-invalid + JS 辅助，三者缺一不可。单独押注 CSS 伪类去解决“未填写”问题，注定失败。