---
title: ':-moz-focusring'
slug: 'Web/CSS/:-moz-focusring'
tags:
  - CSS
  - CSS Referenz
  - NeedsBrowserCompatibility
  - NeedsLiveSample
  - Non-standard
translation_of: 'Web/CSS/:-moz-focusring'
---
<div>{{Non-standard_header}}{{CSSRef}}</div>

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

<p>Die <code>:-moz-focusring</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> ist ähnlich der {{cssxref(":focus")}} Pseudoklasse, jedoch matcht sie ein Element nur, wenn das Element aktuell fokussiert ist <strong>und</strong> der User Agent das Zeichen von Fokusringen aktiviert hat. Falls <code>:-moz-focusring</code> matcht, dann matcht auch <code>:focus</code>, aber das Umgekehrte ist nicht immer wahr - es hängt davon ab, ob der User Agent das Zeichnen von Fokusringen aktiviert hat. Ob der User Agent das Zeichen von Fokusringen aktiviert hat, kann von Dingen wie der Einstellung des Betriebssystems abhängen, das der Benutzer verwendet, sodass das Verhalten dieser Pseudoklasse von Plattform zu Plattform abhängig von den Best Practices (Standardeinstellungen) bezüglich Fokusierung der Plattform oder Benutzereinstellungen.</p>

<h2 id="Syntax">Syntax</h2>

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

<h2 id="Beispiel">Beispiel</h2>

<p>Um die Anzeige eines fokussierten Elements zu definieren, kann dieser Pseudoklassenselektor folgendermaßen verwendet werden:</p>

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

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

<p>Dieses Feature ist bisher noch in keiner Spezifikation definiert, jedoch wurde es <a href="https://lists.w3.org/Archives/Public/www-style/2015Sep/0226.html">in der Working Group diskutiert</a> und es wurde <a href="https://lists.w3.org/Archives/Public/www-style/2015Oct/0012.html">beschlossen, es zu Selectors 4 oder 5 hinzuzufügen</a>.</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>{{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>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>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

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

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