:focus颜色不生效主因是样式被覆盖或UA默认样式干扰，需检查计算样式、清除outline、提高选择器权重；:valid/:invalid依赖HTML5验证属性触发；:placeholder-shown用于精准区分空/非空状态。
input:focus 时颜色不生效？检查是否被其他样式覆盖
很多情况下写好 :focus 却没反应，不是语法错，而是优先级被 input 的全局规则或 !important 覆盖。浏览器默认表单控件（如 input[type="text"]）自带 UA 样式，尤其在 Chrome 中会强制加一层浅灰背景，导致 background-color 看不出变化。
- 用开发者工具检查 computed styles，确认
background-color和color是否真的被应用 - 给
input:focus加上outline: none（否则默认蓝色外框可能干扰视觉判断） - 必要时提高选择器权重，比如用
form input:focus或.form-control:focus
:valid 和 :invalid 配合 required 属性才能触发
:valid 和 :invalid 不是“用户输完就立刻校验”，它们依赖 HTML5 表单验证机制，且默认只在提交时或元素失去焦点后才更新状态（部分浏览器支持实时验证，但不可靠）。
- 必须给
input加required、type="email"、pattern等验证属性，否则伪类始终为未验证态（:valid和:invalid都不匹配） -
:invalid在空值 +required时即触发，不需要用户输入错误内容 - 若想输入过程中实时反馈，需配合 JavaScript 手动添加
class，CSS 伪类本身做不到
input:valid {
color: #28a745;
background-color: #f8fff9;
}
input:invalid:not(:placeholder-shown) {
color: #dc3545;
background-color: #fff8f8;
}
:placeholder-shown 是区分“空”和“已填”的关键
单纯用 :focus 或 :valid 无法区分“刚点进去还没输”和“输了一半又删空”。:placeholder-shown 在 placeholder 可见时为真——也就是值为空字符串且未聚焦（或聚焦但未输入），它能帮你做更细粒度的状态控制。
- 搭配
:focus可实现：空时淡色 placeholder + 聚焦后显色边框；已输内容则保持高亮 - 注意兼容性：
:placeholder-shown在 IE 完全不支持，Edge 10–12 需加::-ms-input-placeholder前缀 - 不要对
input:placeholder-shown:focus写冲突样式，浏览器行为不一致
input:not(:placeholder-shown) {
color: #333;
}
input:placeholder-shown {
color: #999;
}
input:focus {
border-color: #007bff;
}
select / textarea / checkbox 的伪类支持差异大
不是所有表单元素都完整支持全部伪类。select 和 textarea 支持 :focus、:valid、:invalid，但 checkbox 和 radio 的 :valid/:invalid 几乎无效（它们没有值校验逻辑），只能靠 :checked + 自定义样式模拟状态色。
-
select:focus在某些 macOS Safari 版本中会忽略outline，需用box-shadow替代 -
textarea的:placeholder-shown行为与input一致，可放心复用 - 对
input[type="checkbox"]想改“选中时背景色”，得隐藏原生控件，用label+::before+:checked实现
真实项目里最常漏掉的是 :placeholder-shown 的边界判断和 :invalid 的触发前提。别假设浏览器会自动感知“用户正在输”，CSS 伪类只响应 HTML 层面的确定状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
