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

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;
}

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;
}

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;
}

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;
}

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;
}

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!