Stil deaktiviert Schaltfläche mit CSS


216

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.

Antworten:


315

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:

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>


1
Auf CSS 2 oder 3 (oder beides) anwendbar?
ViniciusPires

3
Soweit ich weiß, ist der :disabledSelektor ein CSS3-Selektor. Die background-image, background-repeat, background-positionarbeitet in CSS 2.
beerwin

3
Vielleicht funktioniert a: disabled, [disabled] in CSS2 & 3?
ViniciusPires

3
Nur um zu beachten, der ="true"Teil von disabled="true"ist nicht das, was es deaktiviert. Sie könnten disabled="false"oder verwenden disabled="cat"und es wäre immer noch deaktiviert. Oder einfach disabledohne Wert haben. Diese Eigenschaft kann nur in HTML vorhanden / weggelassen oder über JavaScript mit true / false hinzugefügt werden
Drenai

86

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

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

Kann ich den Hover deaktivieren? und ich habe gehört, dass das in IE6 nicht funktioniert?
Krishna Thota

Ich glaube nicht, dass du es kannst, aber ich bin mir nicht 100% sicher. Wenn Sie auch eine deaktivierte Klasse zu deaktivierten Schaltflächen hinzufügen könnten, könnten Sie dies wahrscheinlich über diese Klasse tun.
Billy Moat

35

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>

2
Genau das, wonach ich gesucht habe. Button ist deaktiviert, sieht aber aktiviert aus!
Domi

Um zu fühlen, wie die Schaltfläche deaktiviert ist, fügen Sie die folgende CSS-Codefarbe hinzu: # c0c0c0; Hintergrundfarbe: #ffffff;
Tamilselvan K

9

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

7

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');

6

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 .


4

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

.v-button{
    opacity:1;    
}

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

2

Betrachten Sie die folgende Lösung

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

Diese Lösung erhöht die Schwäche der App / des Dienstes, die / der gerade erstellt wird.
Franco Gil

1
@FrancoGil Sie haben Recht, aber dies kann ein Weg sein, um die Schaltfläche zum Deaktivieren zu erreichen
Sahil Ralkar

1

Und wenn Sie zu scss wechseln, verwenden Sie:

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

0

Müssen CSS als Belows anwenden:

button:disabled,button[disabled]{
    background-color: #cccccc;
    cursor:not-allowed !important;
  }
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.