---
title: ':-moz-ui-valid'
slug: 'Web/CSS/:-moz-ui-valid'
tags:
  - CSS
  - NeedsExample
  - NeedsMobileBrowserCompatibility
  - No estándar(2)
  - Pseudo clase CSS
  - Referencia CSS
translation_of: 'Web/CSS/:-moz-ui-valid'
---
<div>{{Non-standard_header}}{{CSSRef}}</div>

<h2 id="Resumen">Resumen</h2>

<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a><code> CSS:-moz-ui-valid</code> CSS representa cualquier elemento de un formulario cuyo valor es válido atendiendo a sus  <a href="/es/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation">restricciones de validación</a>.</p>

<p>Se aplica siguiendo las siguientes reglas:</p>

<ul>
 <li>Se aplica la psuedo clase si el control no tiene el foco y el valor es válido.</li>
 <li>Si el control tiene el foco y el valor era válido (esto incluye cuando está vacío), al obtener el foco de aplica la pseudo clase.</li>
 <li>Si el control tiene el foco y el valor era inválido, una vez obtenido el foco se vuelve a validar cada vez que presionamos una tecla para ver si el nuevo valor es válido.</li>
 <li>Si el elemento es requerido la reglas anteriores sólo se aplican si el usuario ha cambiado el valor o intenta enviar el formulario.</li>
</ul>

<p>El resultado es que, si el control era válido cuando el usuario empieza a interactuar con él, el estilo de validación sólo se cambia cuando el usuario cambia el foco a otro control. Sin embargo, si el usuario está intentando corregir un campo que previamente se ha marcado como un valor inválido, cuando el control sea ya correcto esto se mostrará de manera inmediata. Los elementos requeridos sólo se marcan como inválidos si el usuario lo cambia o si lo intenta enviar con un valor inválido.</p>

<h2 id="Especificaciones">Especificaciones</h2>

<p>No es parte de ninguna especificación.</p>

<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico</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>Característica</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</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="Ver_además">Ver además</h2>

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