CSS - Pseudo-class :invalid

The CSS pseudo-class selector :invalid represents an element (such as <form>, <fieldset>, or <input>) whose contents or value is invalid as per its type specified in the type attribute, or fail to validate.

For instance, email inputs, <input type="email"> whose value does not match a valid email pattern or a number input <input type="number"> having a value with alphabets. Both these cases are invalid.

The pseudo-class :invalid is useful in indicating the field errors to the user.

  • Any style applied using :out-of-range pseudo-class, overrides the styles applied using :invalid pseudo-class. Works for <input type="number">.

  • :invalid pseudo-class can be used with other selectors, such as :hover, :focus, etc.

  • In case of radio buttons, if one of them is required, the :invalid pseudo-class is applied to all the radio buttons.

  • Gecko does not apply a style to the :invalid pseudo-class. However, Gecko does apply a style to :user-invalid pseudo-class.

Accessibility concerns: For an invalid input, the default color used is red, which might be difficult for people with certain color blindness state. Instead it is advisable to add an icon or decriptive text along with the invalid input, so that it is easier to understand.

Syntax

:invalid {
    /* ... */
}

CSS:invalid Example

Following example demonstartes use of :invalid pseudo-class used on input field. Here we see when the data in the field is invalid, either not in the specified range or incorrect, the background color changes.

<html>
<head>
<style>
   .container {
      margin: 40px auto;
      max-width: 700px;
   }

   p {
      font-size: 1.5em;
   }

   input {
      display: block;
      width: 50%;
      height: 2em;
      background-color: lightgray;
   }

   input:invalid {
      background-color: tomato;
   }

   input[type="number"]:invalid {
      background-color: orange;
   }

   input:invalid:focus {
      outline: 0;
      border: none;
      box-shadow: 0 0 5px 5px rgba(0, 136, 255, 0.3);
   }
</style>
</head>
<body>
   <div class="container">
      <p>
        Input type is number ranging between 1 and 10.
      </p>
      <input type="number" min="1" max="10" value="2">

      <p>
        Input type is email, which is required. If empty, its invalid.
      </p>
      <input type="email" required>
    </div>
</body>
</html>

In the above example:

  • Two input fields are provided, one of type number and the other of email type.

  • The input field with number, provided CSS styling, such that if the value is not a number and not in the range of 1 to 10, it is marked as invalid.

  • The email input field is marked as invalid, if its not following the email pattern or empty.

  • Another pseudo-class :focus is used along with :invalid, such that when an invalid field has a focus, the CSS style is applied.

Following example demonstartes use of :invalid pseudo-class used on fieldset. The visibility of input field and button is kept hidden, till the input is either empty or incorrect.

<html>
<head>
<style>
   /* Set the visibility to hidden for an invalid fieldset */
   fieldset:invalid ~ fieldset {
      visibility: hidden;
   }

   /* Disable the button while the fieldsets have invalid value */
   form:invalid button {
      background-color: darkgrey;
      opacity: 0.2;
   }

   input,
   textarea {
      box-sizing: border-box;
      width: 500px;
      font-family: monospace;
      padding: 0.25em 0.5em;
   }

   button {
      width: 200px;
      border: thin solid darkgrey;
      font-size: 1.25em;
      background-color: green;
      color: white;
      position:relative;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
        <label for="userid">UserId</label><br />
        <input type="text" name="userid" id="userid" required />
      </fieldset>
   
      <fieldset>
        <label for="email">Email</label><br />
        <input type="email" name="email" id="email" required />
      </fieldset>
    
      <button type="submit" name="send">Submit</button>
    </form> 
</body>
</html>

In the above example:

  • There are two fieldsets, each with one label and input element, one for user id and the other email.

  • The second fieldset remains hidden, until a valid value is not passed in the first one.

  • Till both the fieldsets have valid values, the button remains disabled.

  • The input elements are set to be required, so the user needs to enter a valid input, only then the rest of the form can be seen and acted upon.

Advertisements