CSS:删除禁用的HTML按钮上的阴影

Question

禁用HTML按钮时,阴影会添加到按钮文本中.我自己设置按钮的样式,我想只有一种颜色(白色)没有阴影,但我不知道如何有效地做到这一点.

我以前的方法是让它保持启用状态并重新设置按钮的悬停+活动状态,并忽略click vai Javascript.告诉你,不是很有效率!

http://jsfiddle.net/gLfMX/

编辑:图像显示阴影(在IE9中查看)+缩放版本.

Answer 1

您已经发布了自己的答案,但这里有更多信息.

从我的实验中我得出了相同的结论:在IE上,你不能从CSS改变它.这就是原因.

禁用按钮的颜色取决于Windows配置为"窗口颜色和外观"(在显示设置下)中的"3D对象"项目显示的内容.

禁用按钮的默认颜色为:text = A0A0A0,shadow = white.如果用户更改了默认值,它们可能会有所不同(在Windows 7中,您必须进入"高级设置"才能执行此操作),但几乎每个人都会拥有这些默认设置.它们的设计符合禁用按钮的系统默认背景颜色,即F4F4F4.

我对此问题的解决方案是设计CSS,以便至少对于默认设置,在IE下,禁用按钮看起来没问题 - 最好的方法是在禁用时将背景设置为F4F4F4:

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

如果你像我一样使用Bootstrap,你应该这样做:

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

您还可以添加一些条件选择器以仅为IE启用此选项.

Answer 2

添加border:none;以摆脱阴影jsfiddle

Answer 3

经过几个小时的摆弄，我得出的结论是，IE 无法完成此操作。

由于我使用 jQuery 处理所有按钮单击，因此我只是忽略应用了 CSS 选择属性的任何按钮。当然，它可能不是最优雅的解决方案，但它是跨浏览器视图。

感谢妮可和丹弗斯的帮助。