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;}