CSS：刪除禁用HTML按鈕上的陰影

禁用HTML按鈕時，會將陰影添加到按鈕文本中。我自己設計按鈕，我想只有一種顏色（白色），沒有陰影，但我不知道如何有效地做到這一點。CSS：刪除禁用HTML按鈕上的陰影

我之前的方法是讓它啓用並重新設計按鈕的懸停+活動狀態，並忽略點擊Javascript。告訴你，效率不高！

http://jsfiddle.net/gLfMX/

編輯：圖像顯示的陰影（在IE9正在觀看）+縮放版本。

enter image description here

來源

2012-01-07 Alex Guerin

經過數小時的擺弄，我得出了IE瀏覽器無法完成的結論。

由於我處理所有使用jQuery的按鈕點擊，我只是忽略任何按鈕，我的CSS選擇屬性應用。當然，這可能不是最優雅的解決方案，但它是跨瀏覽器的視圖。

感謝Nicole和danferth的幫助。

來源

2012-01-07 06:47:01

添加border:none;擺脫陰影jsfiddle

來源

2012-01-07 03:04:45 danferth

謝謝，但我說的是在按鈕中的文本的陰影，不是按鈕邊框。 – 2012-01-07 03:29:01

我只在'IE'中看到這種情況，可能''jQuery'和'text-shadow：none;'是一個解決方案。 – danferth 2012-01-07 03:50:29

@danferth：問題僅限於IE 8和9。請注意9.不是10，而不是11. – 2014-07-23 10:08:38

這也適用於：

input[disabled] { 
    border: none; 
}

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

這樣，您就可以專門針對殘疾人的輸入，無需擔心干擾其他人。

來源

2012-01-07 03:10:04

謝謝，但我正在談論按鈕內部文本的陰影，而不是按鈕邊框。 – 2012-01-07 03:29:43

hmmm，我在Firefox 9中沒有看到任何文字陰影。如果您確實看到一個，您可以使用text-shadow：none嘗試上面的選擇器; – 2012-01-07 03:42:50

謝謝妮可。我已編輯帖子以顯示陰影。文本 - 陰影選擇器似乎沒有區別... – 2012-01-07 03:47:03

你已經發布了你自己的答案，但這裏有一些更多的信息。

從我的實驗中我得出了同樣的結論：在IE上，你不能從CSS改變它。這是爲什麼。

禁用的按鈕的顏色取決於Windows配置爲顯示for the "3D Objects" item in "Window Color and Appearance"（在顯示設置下）。

禁用按鈕的默認顏色爲：text = A0A0A0，shadow = white。如果用戶更改默認值，它們可能會不同（在Windows 7中，您必須進入「高級設置」才能執行此操作），但幾乎每個人都會擁有這些默認值。它們被設計爲適合禁用按鈕的系統默認背景顏色，即F4F4F4。

enter image description here

我對這個問題的解決方案是設計的CSS，這樣至少爲默認設置，IE下被禁用按鈕看起來OK - 最好的辦法是將背景設置時禁用F4F4F4：

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

如果您使用Bootstrap像我一樣，你應該這樣做，而不是：

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

您也可以添加一些條件選擇器以僅爲IE啓用此選項。

來源

2013-04-18 22:41:43 sinelaw

這裏是一個如何刪除按鈕上的文字陰影的例子。我試圖擺脫我的菜單按鈕上的陰影。

在我的頂級菜單樣式在CSS後，我尋找我的常規菜單樣式。在哪裏你可以先看到「文字 - 陰影」式樣，那裏存在着你的問題。我找到了我的位置：

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

我的文字陰影設置爲#FFFFFF應用了一些定位。我只是刪除了這個樣式和巴姆，沒有更多的陰影在我的按鈕。

只要看看哪裏「文字陰影」是在您的菜單CSS首次應用，並將其設置爲「文字陰影：無」

來源

2015-04-14 19:25:09 jay

CSS：刪除禁用HTML按鈕上的陰影

回答

相關問題