CSS - Pseudo-class :user-valid

Quiz

The CSS pseudo-class :user-valid applies to form elements that have been successfully validated based on their validation rules.

But only after the user has interacted with them.In other words, it matches elements that are valid only after the user has inputted information and triggered validation.

This pseudo-class is specific to user interactions and doesn't apply in advance.

The pseudo-class :user-valid follows these rules:

If the control isn't in focus and its value is valid, this pseudo-class is applied.
If the control is in focus and had a valid value (even if it was empty) when it received focus, this pseudo-class is applied.
If the control is in focus and had an invalid value when it received focus, it'll be revalidated on each keystroke.
For required elements, these rules are relevant only if the user changed the value or tried to submit the form.

Syntax

:user-valid {
   /* css declarations */
 }

CSS :user-valid Example

The following example demonstrates use of :user-valid pseudo-classes.

<html>
<head>
<title>CSS Pseudocode :user-valid</title>
<style>
   input:user-valid {
      border: 2px solid green;
   }
   input:user-valid + span::before {
      content: "valid ";1111
      color: green;
   }
</style>
</head>
<body>
   <form>
      <div>
         <label for="username">Username:</label>
         <input type="text" id="username" required pattern="[a-zA-Z0-9]+" title="Username should only contain letters and numbers" required />
         <span></span>
      </div>
      <div>
        <input type="submit" value="Submit">
      </div>
   </form>
</body>
</html>

The :user-valid pseudo-class is supported by Firefox browser

Print Page