---
title: ':enabled'
slug: 'Web/CSS/:enabled'
tags:
  - CSS
  - CSS Pseudoklasse
  - Layout
  - Referenz
  - Web
translation_of: 'Web/CSS/:enabled'
---
<div>{{CSSRef}}</div>

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

<p>Die <code>:enabled</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert alle aktivierten Elemente. Ein Element ist aktiviert, falls es aktiviert werden kann (z. B. markierte, angeklickte Elemente oder solche, die Texteingaben akzeptieren) oder die fokussiert werden können. Das Element hat auch einen deaktivierten Zustand, in welchem es nicht aktiviert werden oder fokussiert werden kann.</p>

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

<p>Der folgende Code macht die Textfarbe grün, wenn das Element aktiviert ist, und grau, wenn es deaktiviert ist. Dies erlaubt es, dem Benutzer Feedback darüber zu geben, ob mit den Elementen interagiert werden kann oder nicht.</p>

<div id="Aktivierte_deaktivierte_Inputs_Beispiel">
<p>Das folgende HTML...</p>

<pre class="brush:html">&lt;form action="url_of_form"&gt;
  &lt;label for="FirstField"&gt;First field (enabled):&lt;/label&gt; &lt;input type="text" id="FirstField" value="Lorem"&gt;&lt;br /&gt;
  &lt;label for="SecondField"&gt;Second field (disabled):&lt;/label&gt; &lt;input type="text" id="SecondField" value="Ipsum" disabled="disabled"&gt;&lt;br /&gt;
  &lt;input type="button" value="Submit" /&gt;
&lt;/form&gt;  </pre>

<p>...in Verwendung mit diesem CSS...</p>

<pre class="brush:css; highlight:[1,4]">input:enabled {
  color: #22AA22;
}

input:disabled {
  color: #D9D9D9;
}
</pre>

<p>...ergibt:</p>

<div>{{EmbedLiveSample("Aktivierte_deaktivierte_Inputs_Beispiel", 550, 95)}}</div>

<div>Beachte, dass die Farbe des Buttontexts auch grün ist, da der Button ebenfalls aktiviert ist.</div>
</div>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Keine Änderung</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Definiert die Semantik in Bezug auf HTML und Formulare.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>Keine Änderung</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}</td>
   <td>{{Spec2('CSS3 Basic UI')}}</td>
   <td>Verknüpfung zu Selectors Level 3.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>Definiert die Pseudoklasse, aber nicht die zugehörige Semantik.</td>
  </tr>
 </tbody>
</table>

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

{{Compat("css.selectors.enabled")}}

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

<ul>
 <li>{{cssxref(":disabled")}}</li>
</ul>