CODEWITHSUNDEEP
cssinternet-explorerinput
Dennis
Dennis

Reputation: 47

IE8 and IE9 - Styling after <button> has been clicked

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.

Image of the issue

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;

Upvotes: 1

Views: 3963

Answers (3)

Carlos Ruana
Carlos Ruana

Reputation: 2278

You cannot change the browser styles for disabled buttons in IE, but you could wrap your button like this:

<div class="button-wrap">
    <a class="button" disabled="disabled"><span>My button</span></a>
    <span class="visible-text">My button</span>
</div>

Then position and style visible-text as you want. Something like this:

.visible-text {
    position: absolute;
    cursor: pointer;
    color: green; /* or whatever... */
}

Using visibility: hidden on the default button text keeps the width of the button so you can position there the same text without any problem.

a.button span {
    visibility: hidden;
}

Please try it here:

http://jsfiddle.net/fnwjT/47/

Upvotes: 1

Giona
Giona

Reputation: 21114

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 */
}

Upvotes: 3

Mr. Alien
Mr. Alien

Reputation: 157314

IE has problem with text-shadow: 0 -1px 0 #d12015;, so you need to use proprietary property instead

filter:DropShadow(Color=#d12015, OffX=1, OffY=0);

Upvotes: 2

Related Questions