Using just semantic CSS Pseudo-Classes you can help define important states for form elements that ensure the user provides the correct data without frustration.
input:focus { ?outline: none; ?box-shadow: 3px 3px 1px rgba(0,0,0,0.2); ?border: 1px solid rgba(0,0,0,0.5);}fieldset:disabled { /* :enabled opposite */ ?opacity: 0.5;}input:checked + label { ?font-style: italic;}input:invalid { ?border-color: red;}input:valid { ?border-color: green;}input:required { ?border-width: 2px;}[CSS3] Define Form Element States with CSS Form Pseudo Classes
原文地址：https://www.cnblogs.com/Answer1215/p/10068191.html