---
title: ':-moz-focusring'
slug: 'Web/CSS/:-moz-focusring'
tags:
  - CSS
  - NeedsLiveSample
  - No estándar(2)
  - Referencia CSS
translation_of: 'Web/CSS/:-moz-focusring'
---
<div>{{Non-standard_header}}{{CSSRef}}</div>

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

<p>La  <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a>  <code>:-moz-focusring</code> es similar a la pseudo-clase {{cssxref(":focus")}} , pero sólo selecciona un elemento si éste tiene el foco y el agente de usuario (user-agent) tiene habilitado el mostrar el anillo (borde) alrededor del elemento que actualmente tiene el foco. Si <code>:-moz-focusring</code> selecciona un elemento entonces  <code>:focus</code> también lo selecciona pero esto no se da igual al revés, depende, como se ha dicho anteriormente, de la configuración del agente de usuario. Que un agente de usuario tenga el dibujo del anillo de foco habilitado depende de cosas como la configuración del sistema operativo así que el comportamiento preciso de esta propiedad puede variar de una plataforma a otra dependiendiendo de la configuración de la misma o de la configuración del usuario.</p>

<h2 id="Síntaxis">Síntaxis</h2>

<pre class="syntaxbox">:-moz-focusring</pre>

<h2 id="Ejemplo">Ejemplo</h2>

<p>Para especificar la apariencia de un elemento cuando recibe el foco se puede usar este psuedo-selector de la siguiente manera:</p>

<pre class="brush: css">mybutton:-moz-focusring {
  outline: 2px dotted;
}
</pre>

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

<p>Esta propiedad todavía no está definida en ninguna especificación, aunque fue <a href="https://lists.w3.org/Archives/Public/www-style/2015Sep/0226.html">debatida en el grupo de trabajo</a> y se <a href="https://lists.w3.org/Archives/Public/www-style/2015Oct/0012.html">decidió añadirla a los selectores 4 o 5</a>.</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>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(2)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</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>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Ver_además">Ver además</h2>

<ul>
 <li>{{bug("418521")}}</li>
</ul>