CSS: Rimuovi le ombre sui pulsanti HTML disabilitati

Question

Quando si disattivano i pulsanti HTML, un'ombra viene aggiunta al testo del pulsante. Sto disegnando i pulsanti da solo e mi piacerebbe avere solo un colore (bianco) senza ombra ma non so come farlo in modo efficiente.

Il mio metodo precedente era di lasciarlo abilitato e re-style il pulsante hover + stati attivi e ignorare il click vai Javascript. Te l'avevo detto, non molto efficiente!

http://jsfiddle.net/gLfMX/

EDIT: sull'immagine per mostrare l'ombra (essendo visualizzati in IE9) + una versione ingrandita.

Answer 1

Dopo ore di giocherellare, sono giunto alla conclusione che non può essere fatto con IE.

Poiché gestisco tutti i clic sui pulsanti utilizzando jQuery, ignoro semplicemente qualsiasi pulsante a cui è stata applicata la proprietà CSS selezionata. Certo, probabilmente non è la soluzione più elegante, ma è crossbread viewbale.

Grazie Nicole e Danferth per l'aiuto.

Answer 2

aggiungere border:none; per sbarazzarsi dell'ombra jsfiddle

Answer 3

Questo funziona anche:

input[disabled] { 
    border: none; 
} 

http://jsfiddle.net/gLfMX/2/

questo modo si può rivolgono specificamente l'ingresso disabilitato senza preoccuparsi interferendo con gli altri.

Answer 4

Hai già pubblicato la tua risposta, ma ecco un po 'più informazioni.

Dai miei esperimenti ho raggiunto la stessa conclusione: su IE, non è possibile modificarlo da CSS. Ecco perché.

I colori dei pulsanti disabilitati dipendono da ciò che Windows è configurato per mostrare for the "3D Objects" item in "Window Color and Appearance" (sotto le impostazioni dello schermo).

I colori predefiniti dei pulsanti disabilitati sono: text = A0A0A0, shadow = white. Possono essere diversi se l'utente ha modificato i valori predefiniti (in Windows 7 devi andare in "Impostazioni avanzate" per farlo), ma quasi tutti ne avranno. Sono stati progettati per adattarsi al colore di sfondo predefinito del sistema di un pulsante disabilitato, ovvero F4F4F4.

La mia soluzione per questo problema è quello di progettare il CSS in modo che almeno per le impostazioni predefinite, sotto IE un pulsante disattivato sarà OK - l'approccio migliore è quello di impostare lo sfondo quando è disabilitato a F4F4F4:

button[disabled], a[disabled] { 
    background-color: #f4f4f4; 
} 

Se stai usando Bootstrap come me, si dovrebbe fare questo, invece:

.btn[disabled], .btn.disabled[disabled] { 
    background-color: #f4f4f4; 
} 

È anche possibile aggiungere un selettore condizionale per abilitare questo solo per IE.

Answer 5

Ecco un esempio di come rimuovere lo shadowing sul testo all'interno del pulsante. Stavo cercando di eliminare il mio shadowing sui miei pulsanti di menu.

Dopo il mio stile di menu in CSS, ho cercato il mio stile di menu normale. Dove mai prima vedi lo stile "text-shadow", ecco il tuo problema. ho trovato la mia qui:

#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color: 
    #77778b;font-family:'Oswald', Arial, sans-serif;text-shadow:none;} 

La mia ombra il testo è stato impostato su #FFFFFF con qualche posizionamento applicata. Ho semplicemente rimosso questo stile e bam, non più ombreggiato sui miei pulsanti.

basta cercare ovunque "text-shadow" viene applicato per primo nel CSS menu e impostarlo su "text-shadow: none"