---
title: ':-moz-ui-valid'
slug: orphaned/Web/CSS/:-moz-ui-valid
tags:
  - CSS
  - CSS Pseudoklasse
  - CSS Referenz
  - NeedsExample
  - NeedsMobileBrowserCompatibility
  - Non-standard
translation_of: Web/CSS/:-moz-ui-valid
original_slug: Web/CSS/:-moz-ui-valid
---
<div>{{Non-standard_header}}{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <code>:-moz-ui-valid</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert jedes validierte Formularelement, dessen Wert korrekt validiert basierend auf dessen <a href="/de/docs/Web/Guide/HTML/Formulare_in_HTML#Beschränkungsvalidierung">Validierungsbeschränkungen</a>.</p>

<p>Diese Pseudoklasse wird anhand der folgenden Regeln angewendet:</p>

<ul>
 <li>Falls das Steuerungselement nicht den Fokus hat und der Wert gültig ist, wende diese Pseudoklasse an.</li>
 <li>Falls das Steuerungselement den Fokus hat und der Wert gültig war (einschließlich leer) als es den Fokus erhielt, wende die Pseudoklasse an.</li>
 <li>Falls das Steuerungselement den Fokus hat und der Wert ungültig war als es den Fokus erhielt, werte ihn bei jedem Tastendruck erneut aus.</li>
 <li>Falls das Steuerungselement ein Pflichtfeld ist, werden die vorherigen Regeln nur angewandt, falls der Benutzer den Wert geändert hat oder versucht, das Formular abzuschicken.</li>
</ul>

<p>Das Ergebnis ist, dass wenn das Steuerungselement gültig war als der Benutzer angefangen hat, mit ihm zu interagieren, das Gültigkeitsstyling nur geändert wird, falls der Benutzer den Fokus auf ein anderes Steuerungselement setzt. Falls der Benutzer jedoch versucht, einen zuvor markierten Wert zu korrigieren, zeigt das Steuerungselement sofort an, wenn der Wert gültig wird. Pflichtfelder werden nur als ungültig markiert, falls der Benutzer diese ändert oder versucht, einen unveränderten ungültigen Wert abzuschicken.</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<p>Nicht Teil einer Spezifikation.</p>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Merkmal</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Grundlegende Unterstützung</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop(2)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Merkmal</th>
   <th>Android</th>
   <th>Chrome für Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Grundlegende Unterstützung</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{cssxref(":valid")}}</li>
 <li>{{cssxref(":invalid")}}</li>
 <li>{{cssxref(":required")}}</li>
 <li>{{cssxref(":optional")}}</li>
 <li>{{cssxref(":-moz-ui-valid")}}</li>
</ul>