4.1 Pseudoklasse :checked
Pseudoklassen von Formularen in CSS bieten Möglichkeiten zur Stilgestaltung von Formularelementen abhängig von ihrem Zustand. Diese Pseudoklassen ermöglichen die Erstellung interaktiver und zugänglicher Formulare, die die Benutzeroberfläche und -erfahrung verbessern. Schauen wir uns die Pseudoklassen :checked, :disabled, :enabled und :invalid genauer an.
Die Pseudoklasse :checked wird auf Formularelemente angewendet, die im "ausgewählten" Zustand sind. Dies bezieht sich auf Checkboxen (<input type="checkbox">), Radiobuttons (<input type="radio">) und Optionen (<option>).
Syntax:
selector:checked {
eigenschaften: werte;
}
Beispiel der Verwendung
In diesem Beispiel erhalten ausgewählte Checkboxen, Radiobuttons und Optionen die entsprechende Hintergrundfarbe, wenn sie im "ausgewählten" Zustand sind:
/* Stil für ausgewählte Checkbox */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Stil für ausgewählten Radiobutton */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Stil für ausgewählte Option */
option:checked {
background-color: #e74c3c;
}
4.2 Pseudoklasse :disabled
Die Pseudoklasse :disabled wird auf Formularelemente angewendet, die im deaktivierten Zustand sind. Dies ist nützlich für die Stilgestaltung von Elementen, die vorübergehend nicht verfügbar sind.
Syntax:
selector:disabled {
eigenschaften: werte;
}
Beispiel der Verwendung
In diesem Beispiel erhalten deaktivierte Eingabefelder und Buttons die entsprechende Hintergrund-, Randfarbe und Textfarbe, und ändern auch den Cursor auf "verboten":
/* Stil für deaktiviertes Eingabefeld */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Stil für deaktivierten Button */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
4.3 Pseudoklasse :enabled
Die Pseudoklasse :enabled wird auf Formularelemente angewendet, die im aktivierten Zustand sind. Dies ermöglicht die Stilgestaltung von Elementen, die verfügbar sind.
Syntax:
selector:enabled {
eigenschaften: werte;
}
Beispiel der Verwendung
In diesem Beispiel erhalten aktivierte Eingabefelder und Buttons die entsprechende Hintergrund-, Randfarbe und Textfarbe, und ändern auch den Cursor auf "Zeiger":
/* Stil für aktiviertes Eingabefeld */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Stil für aktivierten Button */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
4.4 Pseudoklasse :invalid
Die Pseudoklasse :invalid wird auf Formularelemente angewendet, die die Validierung nicht bestanden haben. Dies ermöglicht die Stilgestaltung von Eingabefeldern, die ungültige Daten enthalten.
Syntax:
selector:invalid {
eigenschaften: werte;
}
Beispiel der Verwendung
In diesem Beispiel erhalten ungültige Eingabefelder und Textfelder die entsprechende Rand- und Hintergrundfarbe, um visuell anzuzeigen, dass die Daten die Validierung nicht bestanden haben:
/* Stil für ungültiges Eingabefeld */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Stil für ungültiges Textfeld */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
4.5 Beispiel einer vollständigen Implementierung
/* Stil für ausgewählte Checkbox */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Stil für ausgewählten Radiobutton */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Stil für deaktiviertes Eingabefeld */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Stil für deaktivierten Button */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
/* Stil für aktiviertes Eingabefeld */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Stil für aktivierten Button */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
/* Stil für ungültiges Eingabefeld */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Stil für ungültiges Textfeld */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Pseudoklassen Beispiel</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label>
<input type="checkbox" name="option1"> Option 1
</label>
<br>
<label>
<input type="radio" name="choice" value="1"> Choice 1
</label>
<label>
<input type="radio" name="choice" value="2"> Choice 2
</label>
<br>
<input type="text" placeholder="Enter your name" required>
<br>
<input type="email" placeholder="Enter your email" required>
<br>
<button type="submit">Submit</button>
<button type="button" disabled>Disabled Button</button>
</form>
</body>
</html>
GO TO FULL VERSION