mozilla

Revision 57484 of :valid

  • Revision slug: CSS/:valid
  • Revision title: :valid
  • Revision id: 57484
  • Created:
  • Creator: McGurk
  • Is current revision? No
  • Comment Add compatibility support for IE; 1 words added, 4 words removed

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

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 10.0 {{ CompatGeckoDesktop("2") }} 10 10.0 5.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("2") }} {{ CompatNo() }} 10.0 5.0

Specifications

See also

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3 id="Summary">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 id="Examples">Examples</h3>
<p>See {{ cssxref(":invalid") }} for an example.</p>
<h3 id="Browser_compatibility">Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>10.0</td> <td>{{ CompatGeckoDesktop("2") }}</td> <td>10</td> <td>10.0</td> <td>5.0</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoMobile("2") }}</td> <td>{{ CompatNo() }}</td> <td>10.0</td> <td>5.0</td> </tr> </tbody> </table>
</div>
<h3 id="Specifications">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 id="See_also">See also</h3>
<ul> <li>{{ cssxref(":invalid") }}</li> <li>{{ cssxref(":required") }}</li> <li>{{ cssxref(":optional") }}</li>
</ul>
Revert to this revision