Question

---

Both what Mr. Alien and GionaF said does the trick.

However, in this particular case, we decided to remove the onclick events and disabled=”disabled” all together since it didn’t really make any sense.

---

I’ve run into a problem with the <input type="submit"> element in IE8 and 9.

It looks fine, normal, hover and active states. But after the button has been clicked, the text get’s some sort of drop shadow along with a grey color which I can’t seem to override.

I have a feeling that it might be the onclick events causing this, but can it be fixed through CSS?

Html for the buttons:

<input class="button" type="submit" id="CancelButton" name="CancelButton" value="Avbryt" onclick="window.setTimeout( disableButtons, 1 ); return true;" />
<input class="defaultbutton" type="submit" id="PublishButton" name="PublishButton" value="some_ez_publish_code" onclick="window.setTimeout( disableButtons, 1 ); return true;" />

The CSS (lot’s of classnames, leaving them out):

background-image: none;
background: url(../images/btn-sprite-large.png) 0px 0px no-repeat;
border: 0;
color: #fff;
cursor: pointer;
display: block;
font-size: 11px;
font-weight: 900;
height: 32px;
line-height: 26px;
text-align: center;
text-shadow: 0 -1px 0 #d12015;
width: 120px;

Answer 1

It seems that you’re disabling the buttons after click ( function disableButtons ). To change the text’s grey color (default for disabled) you can use:

.button[disabled], .button:disabled {
    color:#fff;
}​

Then, as Mr. Alien said, you’ve to find a way to target ie (probably with conditional comments) and switch from text-shadow to filter:

.ie .button {
    text-shadow:none;
    filter:/* etc */
}