Wie kann ich die Funktionalität einer Schaltfläche mithilfe von CSS vollständig deaktivieren?

CSS zum Deaktivieren der Schaltflächenfunktionalität

Zum vollständigen Deaktivieren einer Schaltfläche, einschließlich ihres Hover-Effekts, ihres Bilds und aller Drag-and-Drop-Funktionen , CSS bietet mehrere Optionen.

Ändern der Schaltflächendarstellung wann Deaktiviert

Verwenden Sie die Pseudoklasse :disabled, um das Erscheinungsbild deaktivierter Schaltflächen zu ändern:

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

Bild- und Hover-Effekt entfernen

Anstatt ein Bild als Schaltfläche zu verwenden, verwenden Sie CSS-Hintergrundbild mit den Eigenschaften „Hintergrundposition“ und „Hintergrundwiederholung“. Dadurch wird das Ziehen von Bildern verhindert:

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

Hover-Effekt deaktivieren

button:disabled {
  background-image: ninguno;
  cursor: default;
}

Textauswahl verhindern

Text deaktivieren Fügen Sie der Auswahl das folgende CSS hinzu Schaltfläche:

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

Beispiel:

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 {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  background-image: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div {
  padding: 5px 10px;
}

Dieses CSS deaktiviert die Schaltflächenfunktionalität, sodass sie optisch ausgegraut bleibt und nicht reagiert.

Das obige ist der detaillierte Inhalt vonWie kann ich die Funktionalität einer Schaltfläche mithilfe von CSS vollständig deaktivieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!