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

Question

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

我之前的方法是启用它并重新设置按钮的悬停+活动状态并忽略点击vai Javascript。告诉你，不是很有效率！

http://jsfiddle.net/gLfMX/

编辑：图像显示阴影（在IE9中查看）+缩放版本。

Answer 1

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

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

禁用按钮的颜色取决于Windows配置为显示for the "3D Objects" item in "Window Color and Appearance"的内容（在显示设置下）。

禁用按钮的默认颜色为：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属性的任何按钮。虽然它可能不是最优雅的解决方案，但它是跨浏览器的视图。

感谢Nicole和danferth的帮助。

Answer 4

这是一个如何删除按钮内文本阴影的示例。我试图摆脱菜单按钮上的阴影。

在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且应用了一些定位。 我只是删除了这个造型和bam，不再在我的按钮上留下阴影。

只需查看菜单CSS中首先应用“text-shadow”的地方，并将其设置为“text-shadow：none”

Answer 5

这也有效：

input[disabled] {
   border: none;
}

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

通过这种方式，您可以专门针对禁用的输入，而无需担心干扰其他输入。