CSS: Devre dışı bırakılmış HTML düğmelerindeki gölgeleri kaldırın

Question

HTML düğmelerini devre dışı bıraktığınızda, düğme metnine bir gölge eklenir. Düğmeleri kendim şekillendiriyorum ve sadece gölge olmayan tek bir rengi (beyaz) elde etmek istiyorum ancak bunu nasıl verimli yapacağımı bilmiyorum.

Önceki yöntemim onu ​​etkin bırakmak ve düğmenin hover + etkin durumlarını yeniden biçimlendirmek ve tıklama vai Javascript'i yok saymaktı. Söylemiştim, çok verimli değil!

http://jsfiddle.net/gLfMX/

DÜZENLEME: Görüntü gölge (IE9 görüntülenmesiyle) + Yakınlaştırılan olarak günceller.

Answer 1

Çalışma saatlerinden sonra, IE ile yapılamadığı sonucuna varıyorum.

jQuery'yi kullanarak tüm düğme tıklamalarını ele aldığımdan, CSS seçili özelliğini uyguladığınız düğmeyi yok sayıyorum. Muhtemelen en zarif çözüm değildir, ancak çapraz tarayıcı görünümüdür.

Yardım için teşekkürler Nicole ve danferth.

Answer 2

border:none; eklemek gölge kurtulmak için jsfiddle

Answer 3

Bu aynı zamanda çalışır:

input[disabled] { 
    border: none; 
} 

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

Bu şekilde özellikle endişelenmeden engelli girişi hedefleyebilir Diğerleriyle karışmak.

Answer 4

Zaten kendi yanıtınızı gönderdiniz, ancak işte biraz daha fazla bilgi.

Denemelerimden aynı sonuca ulaştım: IE'de, onu CSS'den değiştiremezsiniz. İşte nedeni.

Devre dışı bırakılan düğmelerin renkleri, Windows'un for the "3D Objects" item in "Window Color and Appearance" (ekran ayarları altında) gösterecek şekilde yapılandırıldığına bağlıdır.

Devre dışı bırakılan düğmelerin varsayılan renkleri: text = A0A0A0, shadow = white. Kullanıcı varsayılanları değiştirdiyse farklı olabilirler (Windows 7'de bunu yapmak için 'gelişmiş ayarlara gitmelisiniz), ancak hemen hemen herkes buna sahip olacak. F4F4F4 olan devre dışı bırakılmış bir düğmenin sistem varsayılan arka plan rengine uyacak şekilde tasarlanmıştır.

Bu sorunun Çözümümün en az varsayılan ayarları için, IE altında bir engelli düğme Tamam bakacağız böylece CSS tasarlamaktır - F4F4F4 devre dışı olduğunda en iyi yaklaşım arka planı oluşturmaktır:

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

Eğer benim gibi Bootstrap kullanıyorsanız, bunun yerine yapmalısınız:

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

Ayrıca, bunu yalnızca IE için etkinleştirmek için bazı koşullu seçici ekleyebilirsiniz.

Answer 5

Düğme içindeki metnin gölgelemesinin nasıl kaldırılacağına dair bir örnek. Menü düğmelerimde gölgelemeden kurtulmaya çalışıyordum.

CSS'deki en iyi menülerimin ardından, normal menü stilini aradım. "Metin gölgesi" stilini ilk gördüğünüzde, orada sorun var. Burada madeni buldu: Bazı konumlandırma uygulanmış olan

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

Benim metin gölgesi # FFFFFF için ayarlandı. Bu stili ve stili kaldırdım, düğmelerimde gölgelenme yok.

Sadece "text-gölge" menü CSS ilk uygulandığı yerde aramaya ve onu ayarlamak için "text-shadow: none"