Reputation: 2386

CSS: Remove shadows on disabled HTML buttons

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

Upvotes: 14

Answers (5)

jay

Reputation: 11

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"

Upvotes: 1

sinelaw

Reputation: 16553

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.

Upvotes: 9

Alex Guerin

Reputation: 2386

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.

Upvotes: 4