CODEWITHSUNDEEP
cssinternet-explorer-8form-submit
Burnee
Burnee

Reputation: 2623

submit input doesn't get the :active state in IE8 when I click on the button’s text

In IE8 if I click exactly on the text-value on a submit button, it doesn't get the properties from the input:active CSS selector.

But if I click elsewhere on the button it gets them.

Why? How can I solve it?

Upvotes: 1

Views: 4541

Answers (4)

Irishka
Irishka

Reputation: 1136

:active selector edit in IE /edit is used to select and style the active link (anchor) element, not input.

Use Javascript to attach on focus event to your button.

Upvotes: 0

Patrik Affentranger
Patrik Affentranger

Reputation: 13465

Great, thanks Albert for mentioning the :focus selector. I was looking for a solution to the 'clickthrough' problem for a couple of hours now, without finding good information.

My problem was a similar one to OP but for a link instead of input button.

Basically, I have a multiline link/button and in IE it was not possible to only use the :active selector on the link to change the button's properties since the span inside the a would not 'shine' through.

Now, I use a:active and a:focus on the a together with onclick="this.blur();" and it works like a charm for my purposes.

Please have a look at my solution on jsFiddle: http://jsfiddle.net/pezzi/UzARF/

Upvotes: 0

albert
albert

Reputation: 8153

you can achieve this by applying input:focus to your input:active selector declaration: 

input:active,input:focus{background-color:#000}

applying :active and :focus together are great for ui/ux/etc.... a lot of things.

Upvotes: 5

Paul D. Waite
Paul D. Waite

Reputation: 98796

That’s really interesting, I’d never noticed that before. IE9 does the same thing: click on the text, and the :active styles aren’t applied. Click outside the text, and they are.

IE 6 and 7 had a problem where the edges of buttons would be drawn jaggedly if the button had a lot of text. This can be fixed by applying overflow: visible to the button. That doesn’t seem to have any effect on this problem though.

I also tried applying zoom: 1 to give the button layout (although I think form controls already have layout), but that had no effect either.

Unfortunately, it looks like there isn’t a CSS workaround for this issue.

Upvotes: 1

Related Questions