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

Für die deaktivierten Schaltflächen können Sie die :disabled Pseudo-Klasse verwenden. Es funktioniert für alle Elemente, die eine deaktivierte API haben (typischerweise Formularelemente).

Für Browser/Geräte, die nur CSS2 unterstützen, können Sie den [disabled] Selektor verwenden.

Wie bei dem Bild setzen Sie kein Bild in die Schaltfläche ein. Verwenden Sie CSS background-image mit background-position und background-repeat. Auf diese Weise wird das Bildziehen nicht stattfinden.

Problem mit der Auswahl: hier ist ein Link zu der spezifischen Frage:

• Wie man die Hervorhebung der Textauswahl deaktiviert

Beispiel für den deaktivierten Selektor:

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

   Dies ist eine funktionierende Schaltfläche 

   Dies ist eine deaktivierte Schaltfläche

Answer 2

Ich denke, du solltest in der Lage sein, einen deaktivierten Button mit folgendem Code auszuwählen:

button[disabled=disabled], button:disabled {
    // deine CSS Regeln
}

Answer 3

Fügen Sie den unten stehenden Code auf Ihrer Seite hinzu. Es werden keine Änderungen an den Schaltflächenereignissen vorgenommen. Um die Schaltfläche zu deaktivieren/aktivieren, fügen Sie einfach die Schaltflässchenklasse in JavaScript hinzu oder entfernen Sie sie.

Methode 1

    .disabledContent 
    {
        cursor: not-allowed;
        background-color: rgb(229, 229, 229) !important;
    }

    .disabledContent > * 
    {
        pointer-events:none;
    }

Methode 2

    .btn-disable
        {
        cursor: not-allowed;
        pointer-events: none;

        /*Button disabled - CSS color class*/
        color: #c0c0c0;
        background-color: #ffffff;

        }

Answer 4

Von CSS:

.disable{
   cursor: not-allowed;
   pointer-events: none;
}

Dann kannst du beliebige Dekorationen zu dieser Schaltfläche hinzufügen. Um den Status zu ändern, kannst du jQuery verwenden

$("#id").toggleClass('disable');

Answer 5

Um grauen Button-CSS für einen deaktivierten Button anzuwenden.

button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
  background-color: #ddd;
  background: #ddd;
}