mozilla

Revision 57483 of :valid

  • Revision slug: CSS/:valid
  • Revision title: :valid
  • Revision id: 57483
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment Linkification; one or more formatting changes

Revision Content

{{ CSSRef() }}

Summary

The :valid CSS pseudo-class represents any {{ HTMLElement("input") }} element whose content validates correctly according to the input's type setting. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly.

Examples

See {{ cssxref(":invalid") }} for an example.

Browser compatibility

Browser Lowest version
Internet Explorer ---
Firefox (Gecko) 4.0 (2.0)
Opera 9.5

Safari | Chrome | WebKit

5 | 8 | 534.10

Specifications

See also

  • {{ cssxref(":invalid") }}
  • {{ cssxref(":required") }}
  • {{ cssxref(":optional") }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The <code>:valid</code> CSS <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> represents any {{ HTMLElement("input") }} element whose content <a href="/en/HTML/HTML5/Constraint_validation" title="en/HTML/HTML5/Constraint_validation">validates</a> correctly according to the input's type setting. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly.</p><h3>Examples</h3>
<p>See {{ cssxref(":invalid") }} for an example.</p>
<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>4.0 (2.0)</td> </tr> <tr> <td>Opera</td> <td>9.5</td> </tr> <tr> <td> <p>Safari | Chrome | WebKit</p> </td> <td> <p>5 | 8 | 534.10</p> </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>
<h3>See also</h3>
<ul> <li>{{ cssxref(":invalid") }}</li> <li>{{ cssxref(":required") }}</li> <li>{{ cssxref(":optional") }}</li>
</ul>
Revert to this revision