submit input doesn't get the :active state in

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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/

Answer 4

: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.