Introduction to css required, focus, valid and invalid

This article will introduce you to the method of defining required, focus, valid and invalid styles in CSS3. This method currently only supports ie9+ and ff, gg browsers.
css3 tip only applies to advanced browsers:
Chrome
Firefox
Safari
IE9+

Definitions of valid, invalid, and required

input:required, input:valid , input:invalid{  
    border:0 none;   
    outline: 0 none;   
    -webkit-box-shadow:none;   
    -moz-box-shadow:none;   
    -ms-box-shadow:none;   
    -o-box-shadow:none;   
    box-shadow: none;  
}  
/* by http://www.manongjc.com/article/1327.html */

In the past, the verification form would use js and regular expressions to determine whether the filled-in content was correct, such as email verification. .
The emergence of HTML5 provides us with some attributes that can solve the problem of checking the form content without writing js and regular expressions.
:required
Must, that means the input cannot be empty.
:valid
is valid, that is, it is triggered when the filled in content meets the requirements.
:invalid
Invalid, that is, triggered when the filled in content does not meet the requirements.