Heim > Web-Frontend > CSS-Tutorial > Wie kann ich deaktivierte Schaltflächen mit CSS formatieren?

Wie kann ich deaktivierte Schaltflächen mit CSS formatieren?

Patricia Arquette
Freigeben: 2024-12-14 05:47:09
Original
345 Leute haben es durchsucht

How Can I Style Disabled Buttons with CSS?

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;
}
Nach dem Login kopieren
<div>
  <button> This is a working button </button>
</div>

<div>
  <button disabled> This is a disabled button </button>
</div>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage