Wie kann ich den Stil deaktivierter Schaltflächen mithilfe von CSS anpassen?

Anpassen des Stils deaktivierter Schaltflächen mit CSS

Beim Erstellen barrierefreier Webseiten ist es wichtig sicherzustellen, dass Elemente im deaktivierten Zustand richtig gestaltet sind. Dieser Artikel befasst sich mit verschiedenen Aspekten der Anpassung des Erscheinungsbilds deaktivierter Schaltflächen mithilfe von CSS.

Ändern der Schaltflächeneigenschaften

Um die Hintergrundfarbe und das Bild der deaktivierten Schaltfläche zu ändern, verwenden Sie Folgendes: deaktivierte Pseudoklasse:

button:disabled {
  background-color: #cccccc;
  background-image: url('disabled-image.png');
}

Hover deaktivieren Wirkung

Um zu verhindern, dass deaktivierte Schaltflächen auf Hover-Aktionen reagieren, entfernen Sie den Hover-spezifischen Stil:

button:disabled:hover {
  background-color: #cccccc;
}

Verhindern des Ziehens von Bildern

Vermeiden Sie die Verwendung von Bildern als Schaltflächen. Verwenden Sie stattdessen CSS-Hintergrundbild mit Hintergrundposition und Hintergrundwiederholung:

button {
  background-image: url('button-image.png');
  background-position: center;
  background-repeat: no-repeat;
}

Textauswahl deaktivieren

Um die Textauswahl innerhalb von Schaltflächen zu verhindern, wenden Sie Folgendes an Stil:

button {
  -webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
}

Browserkompatibilität

Für unterstützte Browser Nur CSS2, verwenden Sie den Selektor [disabled] anstelle von :disabled.

Beispiel

Betrachten Sie das folgende Beispiel:

<button>Working Button</button>
<button disabled>Disabled Button</button>

button {
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
}

button:disabled {
  background-color: #ccc;
  color: #888;
}

Dieser Code stellt zwei Schaltflächen dar: eine funktionsfähige mit blauem Rand und weißem Text und eine andere deaktiviert mit grauem Hintergrund und abgeblendetem Text. Das Bild der deaktivierten Schaltfläche zeigt ein benutzerdefiniertes Bild an und sein Hover-Effekt ist deaktiviert.

Das obige ist der detaillierte Inhalt vonWie kann ich den Stil deaktivierter Schaltflächen mithilfe von CSS anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!