Pulsante stile disabilitato con CSS

Sto cercando di cambiare lo stile di un pulsante con un'immagine incorporata come mostrato nel seguente violino:

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

Nell'esempio non ci sono immagini, temo.

Sto provando a:

1. Cambia il background-colorpulsante quando è disabilitato
2. Cambia l'immagine nel pulsante quando è disabilitata
3. Disabilita l'effetto hover quando disabilitato
4. Quando si fa clic sull'immagine nel pulsante e la si trascina, l'immagine può essere vista separatamente; Voglio evitarlo
5. È possibile selezionare il testo sul pulsante. Voglio evitare anche quello.

Ho provato a farlo button[disabled]. Ma alcuni effetti non possono essere disabilitati. mi piace top: 1px; position: relative;e immagine.

Per i pulsanti disabilitati è possibile utilizzare lo :disabledpseudo-elemento. Funziona per tutti gli elementi.

Per i browser / dispositivi che supportano solo CSS2, è possibile utilizzare il [disabled]selettore.

Come per l'immagine, non mettere un'immagine nel pulsante. Usa CSS background-imagecon background-positione background-repeat. In questo modo, il trascinamento dell'immagine non avverrà.

Problema di selezione: ecco un link alla domanda specifica:

• Come disabilitare l'evidenziazione della selezione del testo?

Esempio per il selettore disabilitato:

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>

Penso che dovresti essere in grado di selezionare un pulsante disabilitato usando quanto segue:

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

Aggiungi il codice qui sotto nella tua pagina. Fidati di me, nessuna modifica apportata agli eventi dei pulsanti, per disabilitare / abilitare i pulsanti è sufficiente aggiungere / rimuovere la classe di pulsanti in Javascript.

Metodo 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>

Metodo 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>

Per applicare il pulsante grigio CSS per un pulsante disabilitato.

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

Puoi aggiungere qualsiasi decorazione a quel pulsante. Per cambiare lo stato puoi usare jquery

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

Per tutti noi che usiamo bootstrap, puoi cambiare lo stile aggiungendo la classe "disabilitato" e usando quanto segue:

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

Ricorda che l'aggiunta della classe "disabilitato" non disabilita necessariamente il pulsante, ad esempio in un modulo di invio. Per disabilitare il suo comportamento usa la proprietà disabilitata:

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

Un violino funzionante con alcuni esempi è disponibile qui .

Quando il pulsante è disabilitato, imposta direttamente l'opacità. Quindi prima di tutto dobbiamo impostare la sua opacità come

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

considera la seguente soluzione

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

E se cambi a scss usa:

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

È necessario applicare css come belows:

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