CSS:删除禁用的 HTML 按钮上的阴影
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8766987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Remove shadows on disabled HTML buttons
提问by Alex Guerin
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.
禁用 HTML 按钮时,会在按钮文本中添加阴影。我自己设计按钮的样式,我只想使用一种颜色(白色)而没有阴影,但我不知道如何有效地做到这一点。
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!
我以前的方法是启用它并重新设置按钮的悬停 + 活动状态的样式,并忽略单击 vai Javascript。告诉你,效率不高!
EDIT: image to show the shadow (being viewed in IE9) + a zoomed version.
编辑:显示阴影的图像(在 IE9 中查看)+ 缩放版本。
采纳答案by Alex Guerin
After hours of fiddling, I've come to the conclusion it cannot be done with IE.
经过几个小时的摆弄,我得出的结论是它不能用 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.
因为我使用 jQuery 处理所有按钮点击,所以我只是忽略任何应用了我的 CSS selected 属性的按钮。当然,它可能不是最优雅的解决方案,但它是跨浏览器的视图。
Thanks Nicole and danferth for the help.
感谢 Nicole 和 danferth 的帮助。
回答by sinelaw
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.
从我的实验中我得出了同样的结论:在 IE 上,你不能从 CSS 中改变它。这是为什么。
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).
禁用按钮的颜色取决于 Windows 配置为在“窗口颜色和外观”(在显示设置下)中为“3D 对象”项目显示的内容。
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
.
禁用按钮的默认颜色是: text = A0A0A0
,shadow = white。如果用户更改了默认设置,它们可能会有所不同(在 Windows 7 中,您必须进入“高级设置”才能执行此操作),但几乎每个人都会拥有这些设置。它们旨在适应禁用按钮的系统默认背景颜色,即F4F4F4
.
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
:
我对这个问题的解决方案是设计 CSS 以便至少对于默认设置,在 IE 下禁用按钮看起来不错 - 最好的方法是将禁用时的背景设置为F4F4F4
:
button[disabled], a[disabled] {
background-color: #f4f4f4;
}
If you're using Bootstraplike me, you should do this instead:
如果你像我一样使用Bootstrap,你应该这样做:
.btn[disabled], .btn.disabled[disabled] {
background-color: #f4f4f4;
}
You can also add some conditional selector to enable this only for IE.
您还可以添加一些条件选择器以仅对 IE 启用此功能。
回答by jay
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:
在 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;}
My text shadow was set to #FFFFFF with some positioning applied. I simply removed this styling and bam, no more shadowing on my buttons.
我的文本阴影设置为#FFFFFF 并应用了一些定位。我只是删除了这个样式和 bam,我的按钮上不再有阴影。
Just look for wherever "text-shadow" is applied first in your menu CSS and set it to "text-shadow:none"
只需在菜单 CSS 中首先查找“text-shadow”应用的位置并将其设置为“text-shadow:none”
回答by Nicole McCoy
This also works:
这也有效:
input[disabled] {
border: none;
}
This way you can specifically target the disabled input without worrying about interfering with the others.
通过这种方式,您可以专门针对禁用的输入,而不必担心干扰其他输入。