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

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

<p>La  <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a>CSS <code>:-moz-ui-invalid</code> representa cualquier elemento de los formularios que, en determinadas circunstancias, tiene  <a href="/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation">restricciones de validación </a>y no es válido. Esta pseudo-clase se aplica siguiendo la siguiente reglas::</p>

<ul>
 <li>Si el control no tiene el foco y el valor no es válido se aplica la pseudo-clase.</li>
 <li>Si el control tiene el foco y el valor era válido (incluyendo si es un elemento vacío) cuando obtuvo el foco, no se aplica la pseudo-clase.</li>
 <li>Si el control tiene el foco y el valor no era válido cuando obtuvo el foco, se recalcula la validez del valor con cada pulsación de teclado.</li>
 <li>Si el elemento es obligatorio (requerido) sólo se aplican las reglas anteriores si el usuario ha cambiado el valor o ha intentando enviar los datos del formulario (hacer un "sbumit").</li>
</ul>

<p>El resultado es que si el control era válido cuando el usuario empezó a interactuar con él sólo se cambia el estilo de validación cuando el usuario cambia el foco hacia otro elemento. Sin embargo, si el usuario está corrigiendo un valor señalado anteriormente como no válido, el control muestra inmediatamente cuando el valor pasa a ser válido. A los elementos del formulario obligatorios se les aplica la pseudo-clase sólo si el usuario los cambia o si intenta enviar los datos del formulario (hacer "submit").</p>

<p>Por defecto Gecko aplica un estilo que crear un brillo rojo "glow" (usando la propiedad{{Cssxref("box-shadow")}} ) alrededor de los elemento a los que se les aplica esta pseudo-clase. Ver la pseudo-clase {{Cssxref(":invalid")}} para poder observar un ejemplo que muestra como evitar este estilo por defecto.</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-valid")}}</li>
</ul>