:disabled
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die :disabled CSS Pseudoklasse repräsentiert jedes deaktivierte Element. Ein Element ist deaktiviert, wenn es nicht aktiviert (ausgewählt, angeklickt, beschrieben, usw.) oder fokussiert werden kann. Das Element hat auch einen aktivierten Zustand, in dem es aktiviert oder fokussiert werden kann.
Probieren Sie es aus
label {
display: block;
margin-top: 1em;
}
*:disabled {
background-color: dimgrey;
color: linen;
opacity: 1;
}
<form>
<label for="name">Name:</label>
<input id="name" name="name" type="text" />
<label for="emp">Employed:</label>
<select id="emp" name="emp" disabled>
<option>No</option>
<option>Yes</option>
</select>
<label for="empDate">Employment Date:</label>
<input id="empDate" name="empDate" type="date" disabled />
<label for="resume">Resume:</label>
<input id="resume" name="resume" type="file" />
</form>
Syntax
:disabled {
/* ... */
}
Beispiele
Dieses Beispiel zeigt ein grundlegendes Versandformular. Es verwendet das JavaScript change Ereignis, um dem Benutzer zu erlauben, die Rechnungsfelder zu aktivieren/deaktivieren.
HTML
<form action="#">
<fieldset id="shipping">
<legend>Shipping address</legend>
<input type="text" placeholder="Name" />
<input type="text" placeholder="Address" />
<input type="text" placeholder="Zip Code" />
</fieldset>
<br />
<fieldset id="billing">
<legend>Billing address</legend>
<label for="billing-checkbox">Same as shipping address:</label>
<input type="checkbox" id="billing-checkbox" checked />
<br />
<input type="text" placeholder="Name" disabled />
<input type="text" placeholder="Address" disabled />
<input type="text" placeholder="Zip Code" disabled />
</fieldset>
</form>
CSS
input[type="text"]:disabled {
background: #cccccc;
}
JavaScript
Deaktivierte Eingabefelder umschalten, wenn das Kontrollkästchen angeklickt wird
const checkbox = document.querySelector("#billing-checkbox");
const billingItems = document.querySelectorAll('#billing input[type="text"]');
checkbox.addEventListener("change", () => {
billingItems.forEach((item) => {
item.disabled = !item.disabled;
});
});
Ergebnis
Aktivieren/Deaktivieren Sie das Kontrollkästchen, um das Styling der Rechnungsfelder zu ändern.
Spezifikationen
| Spezifikation |
|---|
| HTML # selector-disabled |
| Selectors Level 4 # disabled-pseudo |