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

Wie kann ich deaktivierte Schaltflächen effektiv mit CSS formatieren?

Mary-Kate Olsen
Freigeben: 2024-12-10 11:51:13
Original
686 Leute haben es durchsucht

How Can I Effectively Style Disabled Buttons with CSS?

Deaktivierte Schaltflächen mit CSS gestalten

Hintergrund

Wenn eine Schaltfläche deaktiviert ist, ist dies wichtig um den Benutzern dies visuell anzuzeigen. Dies hilft, Verwirrung und unerwartete Interaktionen zu vermeiden.

Lösung

Um eine deaktivierte Schaltfläche in CSS effektiv zu gestalten, berücksichtigen Sie die folgenden Aspekte:

1. Farbe und Hintergrund:

Verwenden Sie die Pseudoklasse :disabled, um das Erscheinungsbild deaktivierter Schaltflächen zu ändern. Diese Pseudoklasse gilt für jedes Element mit einem deaktivierten Attribut oder das programmgesteuert deaktiviert wurde. Zum Beispiel:

button:disabled {
  background-color: #cccccc;
  border: 1px solid #999999;
}
Nach dem Login kopieren

2. Bild und Hintergrundbild:

Statt der Verwendung eines Um ein Element für das Bild der Schaltfläche zu erstellen, verwenden Sie die CSS-Eigenschaft „Hintergrundbild“. Dadurch entfällt das Problem, das Bild aus der Schaltfläche zu ziehen.

button {
  background-image: url("disabled-image.png");
  background-repeat: no-repeat;
  background-position: center;
}
Nach dem Login kopieren

3. Hover-Effekt:

Um den Hover-Effekt auf deaktivierten Schaltflächen zu deaktivieren, wenden Sie die folgenden Regeln an:

button:disabled {
  cursor: default;
  pointer-events: none;
}
Nach dem Login kopieren

4. Textauswahl:

Um die Textauswahl auf deaktivierten Schaltflächen zu verhindern, verwenden Sie die folgende Eigenschaft:

button:disabled {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
Nach dem Login kopieren

5. Beispiel:

Durch die Kombination dieser Regeln können Sie eine vollständig deaktivierte Schaltfläche erstellen wie:

button:disabled {
  background-color: #cccccc;
  border: 1px solid #999999;
  cursor: default;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich deaktivierte Schaltflächen effektiv 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