Stilisierung des Zustands von Elementen

10.1 Pseudoklasse :focus

CSS-Pseudoklassen bieten großartige Werkzeuge zur Stilierung von Elementen in verschiedenen Zuständen. Mit ihnen kannst du die Benutzerinteraktion mit Formularen und anderen interaktiven Elementen auf der Webseite verbessern. Schauen wir uns an, wie man die Pseudoklassen :focus, :hover, :disabled und :checked zur Stilierung von Eingabeelementen (<input>) verwenden kann.

Die Pseudoklasse :focus wird auf ein Formularelement angewendet, wenn es den Fokus erhält. Das passiert normalerweise, wenn man auf das Element klickt oder mit der Tab-Taste zu ihm wechselt. Die Stilierung von fokussierten Elementen hilft den Benutzern, sich besser im Formular zurechtzufinden.

Beispiel für die Anwendung:

    
      input:focus {
        border-color: #4A90E2;
        box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
        outline: none;
      }
    
  

    
      <form>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
      </form>
    
  

Erklärung

• border-color: ändert die Randfarbe des Elements, wenn es den Fokus erhält
• box-shadow: fügt einen Schatteneffekt um das Element hinzu, um es hervorzuheben
• outline: entfernt die Standardrandlinie des Browsers und ersetzt sie durch einen benutzerdefinierten Stil

10.2 Pseudoklasse :hover

Die Pseudoklasse :hover wird auf ein Element angewendet, wenn der Benutzer mit dem Cursor darauf zeigt. Das kann nützlich sein, um eine visuelle Rückmeldung bei der Interaktion mit einem Element zu geben.

Beispiel für die Anwendung:

    
      input:hover {
        border-color: #50E3C2;
        background-color: #F0F8FF;
      }
    
  

    
      <form>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
      </form>
    
  

Erklärung

• border-color: ändert die Randfarbe des Elements, wenn der Cursor darauf zeigt
• background-color: ändert die Hintergrundfarbe des Elements, wenn der Cursor darüber schwebt

10.3 Pseudoklasse :disabled

Die Pseudoklasse :disabled wird auf Formularelemente angewendet, die deaktiviert sind, also inaktiv und nicht vom Benutzer verwendet oder geändert werden können. Das hilft den Benutzern zu verstehen, dass das Element nicht zur Interaktion verfügbar ist.

Beispiel für die Anwendung:

    
      input:disabled {
        background-color: #E0E0E0;
        color: #A0A0A0;
        cursor: not-allowed;
      }
    
  

    
      <form>
        <label for="username">Benutzername:</label>
        <input type="text" id="username" name="username" disabled>
      </form>
    
  

Erklärung

• background-color: ändert die Hintergrundfarbe des deaktivierten Elements, um seine Inaktivität zu zeigen
• color: ändert die Textfarbe innerhalb des deaktivierten Elements
• cursor: setzt den Cursor auf den Zustand "not-allowed", um visuell zu zeigen, dass das Element nicht verfügbar ist

10.4 Pseudoklasse :checked

Die Pseudoklasse :checked wird auf Elemente vom Typ checkbox und radio angewendet, die sich im ausgewählten Zustand befinden. Damit kann man ausgewählte Elemente stilisieren, um sie deutlicher hervorzuheben.

Beispiel für die Anwendung:

    
      input[type="checkbox"]:checked,
      input[type="radio"]:checked {
        background-color: #4A90E2;
        border-color: #4A90E2;
      }
    
  

    
      <form>
        <label>
          <input type="checkbox" name="option" checked>
          Option 1
        </label>
        <label>
          <input type="checkbox" name="option">
          Option 2
        </label>
        <label>
          <input type="radio" name="choice" checked>
          Wahl 1
        </label>
        <label>
          <input type="radio" name="choice">
          Wahl 2
        </label>
      </form>
    
  

Erklärung

• background-color: ändert die Hintergrundfarbe des ausgewählten Elements
• border-color: ändert die Randfarbe des ausgewählten Elements