用:optional伪类可直接为非必填表单字段添加视觉提示，它匹配所有未声明required属性的原生表单控件，兼容性好且无需js或额外class。
怎么让非必填表单字段带视觉提示
直接用 :optional 伪类就行，它会自动匹配所有没设 required 属性的 <input>、<select></select>、<textarea></textarea> 元素。不用 JS 判断，也不用额外 class。
常见错误是以为它只对 type="text" 有效，其实只要原生表单控件没加 required，都算 —— 包括 type="email"、type="number"，甚至 <select multiple></select>。
- 注意：
required是布尔属性，写成required="false"或required=""都无效，只要存在就视为必填 - 兼容性没问题，Chrome 10+、Firefox 4+、Safari 3.1+、Edge 12+ 全支持
- 别和
:not(:required)混用，语义一样但多写几个字符，没必要
:optional 和 :required 样式冲突怎么办
当一个字段既写了 required 又被其他规则命中（比如 class 或属性选择器），样式优先级由 CSS 特异性决定，不是伪类“赢”或“输”。:optional 自身特异性很低（0,1,0），容易被 .form-input 这类类选择器覆盖。
典型场景：全局给 :optional 加浅灰边框，但某个特定输入框需要蓝色边框且非必填 —— 它的 class 规则会盖掉 :optional 的设置。
立即学习“前端免费学习笔记（深入）”；
- 解决办法只有提高特异性：用
input:optional、textarea:optional明确限定元素类型 - 或者用
input:not([required])替代，虽然写法长点，但可读性更强，也更容易调试 - 千万别用
!important硬顶，后面维护时根本分不清哪条生效了
为什么 placeholder 文字没跟着变色
:optional 只作用于元素本身，不穿透到伪元素（如 ::placeholder）。所以即使 input 匹配了 :optional，它的 ::placeholder 也不会自动继承对应样式。
这导致一个常见错觉：“我写了 input:optional::placeholder { color: #999; }，但没生效”—— 实际上是你漏写了 input:optional::placeholder 这整条规则。
- 必须显式写出完整选择器：
input:optional::placeholder、textarea:optional::placeholder - 注意 Safari 对
::placeholder的支持需要加::-webkit-input-placeholder前缀（仅旧版） - 如果用了 CSS-in-JS 或预处理器，确保嵌套语法没把伪元素丢掉
Vue/React 里动态控制 required 时 :optional 失效？
不是失效，是 DOM 属性没更新。框架里常有人用 v-bind:required="isOptional ? false : true" 或 required={false}，但这样生成的 HTML 是 required="false" —— 浏览器把它当成了“存在即必填”，:optional 完全不匹配。
正确做法是彻底移除 required 属性，而不是设为 false。
- Vue：用
v-bind:required.prop="isRequired"（.prop 修饰符确保绑定到 DOM property 而非 attribute） - React：用
required={isRequired}即可，JSX 会自动处理布尔值的 attribute 移除逻辑 - 纯 JS：用
el.toggleAttribute('required', isRequired)，比 set/removeAttribute 更安全
真正容易被忽略的是：表单重置（<form></form> 的 reset() 方法）会把 required 属性状态还原为初始 HTML，不是当前 JS 设置的值。如果你靠 JS 动态改过 required，reset 后 :optional 表现可能和预期不一致。
