Revision 26219 of :invalid

  • Revision slug: CSS/:invalid
  • Revision title: :invalid
  • Revision id: 26219
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment new page; page created, 128 words added

Revision Content

{{ CSSRef() }}{{ gecko_minversion_header("2.0") }}

Summary

The :invalid CSS pseudo-class is applied automatically to {{ HTMLElement("input") }} elements whose contents fail to validate according to the input's type setting. This allows you to easily have invalid fields adopt an appearance that helps the user identify and correct errors.

Examples

This example presents a simple form that colors elements green when they validate and red when they don't.

<style type="text/css">
  :invalid {
    background-color: #ffdddd;
  }
  
  :valid {
    background-color: #ddffdd;
  }
  
  :required {
    border-color: #800000;
    border-width: 3px;
  }
</style>

<form>
  <label>Enter a URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Enter an email address:</label>
  <input type="email" required/>
</form>

Browser compatibility

Browser Lowest version
Internet Explorer ---
Firefox (Gecko) ---
Opera ?
Safari (WebKit) ?

Specifications

Revision Source

<p>{{ CSSRef() }}{{ gecko_minversion_header("2.0") }}</p>
<h3>Summary</h3>
<p>The :invalid CSS pseudo-class is applied automatically to {{ HTMLElement("input") }} elements whose contents fail to validate according to the input's type setting. This allows you to easily have invalid fields adopt an appearance that helps the user identify and correct errors.</p>
<h3>Examples</h3>
<p>This example presents a simple form that colors elements green when they validate and red when they don't.</p>
<pre class="brush: html">&lt;style type="text/css"&gt;
  :invalid {
    background-color: #ffdddd;
  }
  
  :valid {
    background-color: #ddffdd;
  }
  
  :required {
    border-color: #800000;
    border-width: 3px;
  }
&lt;/style&gt;

&lt;form&gt;
  &lt;label&gt;Enter a URL:&lt;/label&gt;
  &lt;input type="url" /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;label&gt;Enter an email address:&lt;/label&gt;
  &lt;input type="email" required/&gt;
&lt;/form&gt;
</pre>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> </tr> <tr> <td>Internet Explorer</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>---</td> </tr> <tr> <td>Opera</td> <td>?</td> </tr> <tr> <td>Safari (WebKit)</td> <td>?</td> </tr> </tbody>
</table>
<h3>Specifications</h3>
<ul> <li><a class=" external" href="http://www.w3.org/TR/css3-ui/#pseudo-validity" title="http://www.w3.org/TR/css3-ui/#pseudo-validity">CSS 3 Basic User Interface Module</a></li>
</ul>
Revert to this revision