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

发布于 2024-12-25 18:55:07 字数 347 浏览 1 评论 0原文

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

我之前的方法是保持其启用状态并重新设置按钮的悬停+活动状态的样式并忽略单击 vai Javascript。告诉你,效率不太高!

http://jsfiddle.net/gLfMX/

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

在此处输入图像描述

When disabling HTML buttons, a shadow gets added to the button text. I'm styling the buttons myself and I would like to only have the one colour (white) with NO shadow but I do not know how to do it efficiently.

My previous method was to leave it enabled and re-style the button's hover + active states and ignore the click vai Javascript. Told you, not very efficient!

http://jsfiddle.net/gLfMX/

EDIT: image to show the shadow (being viewed in IE9) + a zoomed version.

enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

猥琐帝 2025-01-01 18:55:07

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

根据我的实验,我得出了同样的结论:在 IE 上,你无法通过 CSS 更改它。原因如下。

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

禁用按钮的默认颜色为:文本 = A0A0A0,阴影 = 白色。如果用户更改默认值,它们可能会有所不同(在 Windows 7 中,您必须进入“高级设置”才能执行此操作),但几乎每个人都会有这些。它们被设计为适合禁用按钮的系统默认背景颜色,即 F4F4F4

在此处输入图像描述

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

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

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

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

你还可以添加一些条件选择器以仅为 IE 启用此功能。

You already posted your own answer, but here's a bit more info.

From my experiments I've reached the same conclusion: on IE, you cannot change it from CSS. Here's why.

The colors of disabled buttons depend on what Windows is configured to show for the "3D Objects" item in "Window Color and Appearance" (under display settings).

The default colors of the disabled buttons are: text = A0A0A0, shadow = white. They may be different if the user changed the defaults (in Windows 7 you have to go into 'advanced settings' to do it), but almost everyone will have these. They were designed to fit the system default background color of a disabled button, which is F4F4F4.

enter image description here

My solution for this problem is to design the CSS so that at least for the default settings, under IE a disabled button will look OK - the best approach is to set the background when disabled to F4F4F4:

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

If you're using Bootstrap like me, you should do this instead:

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

You can also add some conditional selector to enable this only for IE.

○闲身 2025-01-01 18:55:07

添加 border:none; 消除阴影 jsfiddle

add border:none; to get rid of the shadow jsfiddle

夜司空 2025-01-01 18:55:07

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

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

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

After hours of fiddling, I've come to the conclusion it cannot be done with IE.

Since I handle all the button clicks using jQuery, I just ignore any button that has my CSS selected property applied. Granted it is probably not the most elegant solution, but it is cross-browser viewbale.

Thanks Nicole and danferth for the help.

挽梦忆笙歌 2025-01-01 18:55:07

这是如何消除按钮内文本上的阴影的示例。我试图消除菜单按钮上的阴影。

在 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 中查找首先应用“text-shadow”的位置并将其设置为“text-shadow:none”

Here is an example of how to remove the shadowing on the text inside the button.I was trying to get rid of my shadowing on my menu buttons.

After my top menus styling in CSS, I looked for my regular menu styling.
Where ever you see the "text-shadow" styling first, there-in lies your problem.
I found mine here:

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

My text shadow was set to #FFFFFF with some positioning applied.
I simply removed this styling and bam, no more shadowing on my buttons.

Just look for wherever "text-shadow" is applied first in your menu CSS and set it to "text-shadow:none"

夜清冷一曲。 2025-01-01 18:55:07

这也有效:

input[disabled] {
   border: none;
}

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

这样您就可以专门定位禁用的输入,而不必担心干扰其他输入。

This also works:

input[disabled] {
   border: none;
}

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

This way you can specifically target the disabled input without worrying about interfering with the others.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文