English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS Pseudo-Klasse :enabled stellt jeden aktiven (aktiviert) Element dar. Wenn ein Element aktiviert werden kann (z.B. auswählen, klicken oder Texteingabe akzeptieren) oder Fokus erhält, ist es aktiviert. Ein Element hat auch einen deaktivierten Zustand (deaktiviert), bei dem das Element nicht aktiviert oder fokussiert werden kann.
Vollständiges Referenzhandbuch für CSS-Selektoren
Legen Sie die Textfarbe aller "text"-Eingabefelder mit "aktiviert" fest:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>
<style>
input:enabled {
color: #22AA22;
}
input:disabled {
color: #D9D9D9;
}
</style>
</head>
<body>
<form action="url_of_form">
<label for="FirstField">Erster Feld (aktiviert):</label> <input type="text" id="FirstField" value="Lorem"><br />
<label for="SecondField">Zweiter Feld (deaktiviert):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Testen Sie es heraus ‹/›:enabled Selektor entspricht jedem aktiven Element (wird hauptsächlich für Formularelemente verwendet).
Die Zahlen in der Tabelle geben die erste Browser-Version an, die das Attribut unterstützt.
| Selektor | |||||
|---|---|---|---|---|---|
| :enabled | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Legen Sie den Hintergrundfarbe für alle aktiven Eingabeelemente fest:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>
<style>
input:enabled
{
background:#ffff00;
}
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 ‹/›