第 123 期(W3C标准-CSS-伪类&伪元素)：表单验证伪类

[wingmeng]

form 内置验证有一些 CSS 伪类，如 :required, :optional，:valid，:invalid，这些伪类对于突出显示用户的字段错误非常有用。

/* 匹配所有输入表单项 */
input {border: 1px solid #ccc;}

/* 匹配非必填的表单项（即没有 required 属性） */
input:optional {border-color: #666;}

/* 匹配必填的输入表单项 */
input:required {border-color: blue;}

/* 匹配合法值的输入表单项（验证通过） */
input:valid {border-color: green;}

/* 匹配非法值的输入表单项（验证未通过） */
input:invalid {border-color: red;}