CSS Selector - Selecting invalid input Elements

The :valid and :invalid selectors match input elements that have met or failed their input validation requirements, respectively.


CSS Version

CSS Syntax

:invalid {
   style properties 

Browser compatibility

:invalid Yes 10.0 Yes Yes Yes


The following code uses the :valid and :invalid Selectors.

:invalid {<!-- w  w  w  .j a v a  2  s  .  c  o  m-->
  outline: medium solid red;

:valid {
  outline: medium solid green;
  <form method="post" action="http://example.com/form">
      <label for="name">Name: <input required id="name" name="name" /></label>
      <label for="name">City: <input required id="city" name="city" /></label>
    <button type="submit">Submit</button>

Click to view the demo