CSS: Remove shadows on disabled HTML buttons

Question

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.

Answer 1

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.

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.

Answer 2

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