initial commit

1 files changed, 139 insertions, 0 deletions

diff --git a/files/de/web/css/_colon_disabled/index.html b/files/de/web/css/_colon_disabled/index.html
new file mode 100644
index 0000000000..cd11062408
--- /dev/null
+++ b/files/de/web/css/_colon_disabled/index.html
@@ -0,0 +1,139 @@
+---
+title: ':disabled'
+slug: 'Web/CSS/:disabled'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:disabled'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:disabled</code> CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> steht für alle deaktivierten Elemente. Ein Element gilt als deaktiviert, wenn es nicht aktiviert (d.h. ausgewählt, angeklickt oder mit Text gefüllt) oder fokussiert werden kann. Das Element verfügt außerdem über einen Status, in dem es aktiviert oder fokussiert werden kann.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Beispielselektoren">Beispielselektoren</h3>
+
+<dl>
+ <dt>input:disabled</dt>
+ <dd>Wählt alle deaktivierten Eingabefelder aus.</dd>
+ <dt>select.country:disabled</dt>
+ <dd>Wählt ein deaktiviertes Zielelement mit der Klasse country aus.</dd>
+</dl>
+
+<h3 id="Anwendungsbeispiel">Anwendungsbeispiel</h3>
+
+<p>Das folgende CSS:</p>
+
+<pre class="brush: css">input[type="text"]:disabled {
+  background: #ccc;
+}
+</pre>
+
+<p>Angewendet auf das folgende HTML5 Beispiel:</p>
+
+<pre class="brush: html">&lt;form action="#"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Shipping address&lt;/legend&gt;
+    &lt;input type="text" placeholder="Name"&gt;
+    &lt;input type="text" placeholder="Address"&gt;
+    &lt;input type="text" placeholder="Zip Code"&gt;
+  &lt;/fieldset&gt;
+  &lt;fieldset id="billing"&gt;
+    &lt;legend&gt;Billing address&lt;/legend&gt;
+    &lt;label for="billing_is_shipping"&gt;Same as shipping address:&lt;/label&gt;
+    &lt;input type="checkbox" onchange="javascript:toggleBilling()" checked&gt;
+    &lt;br /&gt;
+    &lt;input type="text" placeholder="Name" disabled&gt;
+    &lt;input type="text" placeholder="Address" disabled&gt;
+    &lt;input type="text" placeholder="Zip Code" disabled&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
+
+<pre class="brush: html">&lt;form action="#"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Empfängeradresse&lt;/legend&gt;
+    &lt;input type="text" placeholder="Name"&gt;
+    &lt;input type="text" placeholder="Adresse"&gt;
+    &lt;input type="text" placeholder="PLZ"&gt;
+  &lt;/fieldset&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Rechnungsadresse&lt;/legend&gt;
+    &lt;label for="billing_is_shipping"&gt;Rechnungsadresse entspricht der Empfängeradresse:&lt;/label&gt;
+    &lt;input type="checkbox" onchange="javascript:toggleBilling()" checked&gt;
+    &lt;br /&gt;
+    &lt;input type="text" placeholder="Name" disabled&gt;
+    &lt;input type="text" placeholder="Address" disabled&gt;
+    &lt;input type="text" placeholder="Zip Code" disabled&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
+
+<p>Mit ein wenig JavaScript:</p>
+
+<pre class="brush:js">function toggleBilling() {
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+  for (var i = 0; i &lt; billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+</pre>
+
+<p>Führt zu einem ergrautem Hintergrund aller Texteingabefelder im {{HTMLElement("fieldset")}} der Rechnungsadresse.</p>
+
+<p>{{EmbedLiveSample('Anwendungsbeispiel', '300px', '250px', '', 'Web/CSS/:disabled')}}</p>
+
+<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-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Beschreibt die Semantik von HTML und Formularen.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 UI', '#pseudo-classes', ':disabled')}}</td>
+   <td>{{Spec2('CSS3 UI')}}</td>
+   <td>Verweis auf Selektors Level 3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Beschreibt die Pseudoklasse,aber nicht die dazugehörige Semantik.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+{{Compat("css.selectors.disabled")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref(":enabled")}}</li>
+</ul>