Wie kann ich deaktivierte Schaltflächen mit CSS formatieren?

Deaktivierte Schaltflächen mit CSS gestalten

Bei dieser Frage hatte der Benutzer Schwierigkeiten, das Erscheinungsbild deaktivierter Schaltflächen zu ändern, einschließlich der Änderung ihrer Hintergrundfarbe , Bild, Hover-Effekt und Verhindern des Ziehens von Bildern und der Textauswahl. Um diese Herausforderungen zu bewältigen, können wir die Pseudoklasse :disabled verwenden.

Für Browser, die nur CSS2 unterstützen, kann der Selektor [disabled] verwendet werden. Um das Ziehen von Bildern zu vermeiden, platzieren Sie kein Bild innerhalb der Schaltfläche selbst. Verwenden Sie stattdessen CSS-Hintergrundbild mit Hintergrundposition und Hintergrundwiederholung.

Um das Textauswahlproblem zu lösen, lesen Sie die folgende Diskussion:

• So deaktivieren Sie Hervorhebung der Textauswahl

Beachten Sie für die Implementierung des deaktivierten Selektors das Beispiel unten:

button {
  border: 1px solid #0066cc;
  background-color: #0099cc;
  color: #ffffff;
  padding: 5px 10px;
}

button:hover {
  border: 1px solid #0099cc;
  background-color: #00aacc;
  color: #ffffff;
  padding: 5px 10px;
}

button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

div {
  padding: 5px 10px;
}

<div>
  <button> This is a working button </button>
</div>

<div>
  <button disabled> This is a disabled button </button>
</div>

Indem Sie diese Richtlinien befolgen und den bereitgestellten Code verwenden, können Sie das Erscheinungsbild und das Verhalten deaktivierter Schaltflächen in Ihrer Webanwendung erfolgreich anpassen.

Das obige ist der detaillierte Inhalt vonWie kann ich deaktivierte Schaltflächen mit CSS formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!