Stil deaktiviert Schaltfläche mit CSS

Ich versuche, den Stil einer Schaltfläche mit einem eingebetteten Bild zu ändern, wie in der folgenden Geige dargestellt:

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

Im Beispiel gibt es leider keine Bilder.

Ich versuche zu:

1. Ändern Sie die background-colorSchaltfläche, wenn sie deaktiviert ist
2. Ändern Sie das Bild in der Schaltfläche, wenn es deaktiviert ist
3. Deaktivieren Sie den Hover-Effekt, wenn er deaktiviert ist
4. Wenn Sie auf das Bild in der Schaltfläche klicken und es ziehen, wird das Bild separat angezeigt. Das möchte ich vermeiden
5. Der Text auf der Schaltfläche kann ausgewählt werden. Das möchte ich auch vermeiden.

Ich habe es versucht button[disabled]. Einige Effekte konnten jedoch nicht deaktiviert werden. wie top: 1px; position: relative;und Bild.

Für die deaktivierten Schaltflächen können Sie das :disabledPseudoelement verwenden. Es funktioniert für alle Elemente.

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

Fügen Sie wie beim Bild kein Bild in die Schaltfläche ein. Verwenden Sie CSS background-imagemit background-positionund background-repeat. Auf diese Weise wird das Ziehen des Bildes nicht durchgeführt.

Auswahlproblem: Hier ist ein Link zu der spezifischen Frage:

• Wie deaktiviere ich die Hervorhebung der Textauswahl?

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

<div>
  <button> This is a working button </button>
</div>

<div>
  <button disabled> This is a disabled button </button>
</div>

Ich denke, Sie sollten in der Lage sein, eine deaktivierte Schaltfläche wie folgt auszuwählen:

button[disabled=disabled], button:disabled {
    // your css rules
}

Fügen Sie den folgenden Code in Ihre Seite ein. Vertrauen Sie mir, keine Änderungen an Schaltflächenereignissen vorgenommen. Um die Schaltfläche zu deaktivieren / aktivieren, fügen Sie einfach die Schaltflächenklasse in Javascript hinzu oder entfernen sie.

Methode 1

 <asp Button ID="btnSave" CssClass="disabledContent" runat="server" />

<style type="text/css">
    .disabledContent 
    {
        cursor: not-allowed;
        background-color: rgb(229, 229, 229) !important;
    }

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

Methode 2

<asp Button ID="btnSubmit" CssClass="btn-disable" runat="server" />

<style type="text/css">
    .btn-disable
        {
        cursor: not-allowed;
        pointer-events: none;

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

        }
</style>

So wenden Sie CSS für graue Schaltflächen für eine deaktivierte Schaltfläche an

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

Per CSS:

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

Sie können dieser Schaltfläche eine beliebige Dekoration hinzufügen. Zum Ändern des Status können Sie jquery verwenden

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

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

HTML

<button type="button"class="btn disabled">Text</button>

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

Denken Sie daran, dass das Hinzufügen der Klasse "deaktiviert" die Schaltfläche nicht unbedingt deaktiviert, z. B. in einem Übermittlungsformular. Verwenden Sie die deaktivierte Eigenschaft, um das Verhalten zu deaktivieren:

<button type="button"class="btn disabled" disabled="disabled">Text</button>

Eine funktionierende Geige mit einigen Beispielen finden Sie hier .

Wenn Ihre Schaltfläche deaktiviert ist, wird die Deckkraft direkt eingestellt. Also müssen wir zuerst seine Deckkraft als einstellen

.v-button{
    opacity:1;    
}

input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
  //  apply css here what u like it will definitely work...
}

Betrachten Sie die folgende Lösung

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

Und wenn Sie zu scss wechseln, verwenden Sie:

button {
  backgroud-color: #007700
  &:disabled {
    backgroud-color: #cccccc
  }
}

Müssen CSS als Belows anwenden:

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