Stil deaktivierte Schaltfläche mit CSS

Question

Ich versuche, den Stil eines Buttons mit eingebettetem Bild zu ändern, wie im folgenden Fiddle zu sehen:

http://jsfiddle.net/krishnathota/xzBaZ/1/

In dem Beispiel sind leider keine Bilder vorhanden.

Ich versuche:

1. Die Hintergrundfarbe des Buttons zu ändern, wenn er deaktiviert ist
2. Das Bild im Button zu ändern, wenn er deaktiviert ist
3. Den Hover-Effekt bei Deaktivierung zu deaktivieren
4. Wenn Sie auf das Bild im Button klicken und es ziehen, kann das Bild separat gesehen werden; das möchte ich vermeiden
5. Der Text auf dem Button kann ausgewählt werden. Das möchte ich auch vermeiden.

Ich habe versucht, es mit button[disabled] zu machen. Aber einige Effekte konnten nicht deaktiviert werden, wie top: 1px; position: relative; und das Bild.

Answer 1

Bitte beachten Sie die folgende Lösung

.disable-button{ 
  pointer-events: none; 
  background-color: #edf1f2;
}

Answer 2

Für alle, die Bootstrap verwenden, können Sie den Stil ändern, indem Sie die Klasse "disabled" hinzufügen und folgendes verwenden:

HTML

Text

CSS

.btn:disabled,
.btn.disabled{
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}
.btn:disabled:hover,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:focus {
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}

Bitte beachten Sie, dass das Hinzufügen der "disabled" Klasse den Button nicht unbedingt deaktiviert, zum Beispiel in einem Absendeformular. Verwenden Sie die disabled Eigenschaft, um sein Verhalten zu deaktivieren:

Text

Ein funktionierendes Beispiel mit einigen Beispielen finden Sie hier.

Answer 3

Wenn Ihre Schaltfläche deaktiviert ist, wird die Opazität direkt festgelegt. Also müssen wir zuerst die Opazität wie folgt festlegen:

.v-button{
    opacity:1;    
}

Answer 4

Müssen CSS wie folgt anwenden:

button:disabled,button[disabled]{
    background-color: #cccccc;
    cursor:not-allowed !important;
  }

Answer 5

input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
  // Füge hier den gewünschten CSS-Code hinzu, es wird definitiv funktionieren...
}