English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:disabled - Der CSS-Pseudo-Klasse zeigt alle deaktivierten Elemente an. Ein Element ist in einem deaktivierten Zustand, wenn es nicht aktiviert werden kann (z.B. ausgewählt, geklickt oder Texteingabe akzeptieren) oder nicht in den Fokus gelangen kann. Ein Element hat auch einen aktiven Zustand (enabled state), in dem es aktiviert oder in den Fokus gelangen kann.
Vollständiges Referenzhandbuch für CSS-Selektoren
Set the background color for all disabled input elements with type="text":
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>
<style>
input[type="text"]:enabled
{
background:gelb;
}
input[type="text"]:disabled
{
background:#dddddd;
}
</style>
</head>
<body>
<form action="">
Name: <input type="text" value="Mouse"> /><br>
Region: <input type="text" disabled="disabled" value="Disneyland"> /><br>
</form>
</body>
</html>Testen Sie es heraus ‹/›:disabled Selektor entspricht jedem deaktivierten Element (wird hauptsächlich für Formularelemente verwendet).
Die Zahlen in der Tabelle stellen die erste Browser-Version dar, die das Attribut unterstützt.
| Selektor | |||||
|---|---|---|---|---|---|
| :disabled | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Legen Sie den Hintergrundfarbe für alle deaktivierten Eingabelemente fest:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>
<style>
input:enabled
{
background:gelb;
}
input:disabled
{
background:#dddddd;
}
</style>
</head>
<body>
<form action="">
Vorname: <input type="text" value="Mickey"> /><br>
Nachname: <input type="text" value="Maus"> /><br>
Land: <input type="text" disabled="disabled" value="Disneyland"> /><br>
Passwort: <input type="password" name="password"> />
<input type="radio" value="male" name="gender"> /> Männlich<br>
<input type="radio" value="female" name="gender"> /> Weiblich<br>
<input type="checkbox" value="Fahrrad"> /> Ich habe ein Fahrrad<br>
<input type="checkbox" value="Auto"> /> Ich habe ein Auto
</form>
</body>
</html>Testen Sie es heraus ‹/›