#优质博文 #前端 #css #新特性
Form Validation That Doesn't Annoy Users: CSS :user-valid and :user-invalid
AI 摘要： :user-valid 和 :user-invalid 是 CSS 新伪类，可改善表单验证体验。这些伪类与传统的 :valid 和 :invalid 不同，它们会等待用户有意义的交互（如开始输入）后才应用样式，从而避免过早显示错误状态。这种改进显著优化了用户体验，特别是在需要更灵活的表单样式时。例如：

input:user-valid { border-color: #10b981; }
input:user-invalid { border-color: #ef4444; }

via Trevor I. Lasn

Form Validation That Doesn't Annoy Users: CSS :user-valid and :user-invalid

The new pseudo-classes :user-valid and :user-invalid give us a smarter way to style form validation states based on user interaction