Making :focus work in ie7 using css?

Question

Is there a simple hack for this? I'd prefer to avoid javascript.

Answer 1

For ie6 you can use :active but ie7 you need javascript

Answer 2

In this case JavaScript is the simple hack. Take a look at the ie7-js project.

IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

Upgrade MSIE5.5-7 to be compatible with MSIE8.

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"&gt;&lt;/script&gt;
<![endif]-->

You can also refer to this SO question. IE7 doesn't support this pseudo class.

Answer 3

IE6/7 don't support any :focus

You can use this jQuery snippet, to handle :focus for them:

jQuery(function($) {
    $(".block div").bind('focus blur',function(){$(this).toggleClass('focus')});
});

The usage:

.block div:focus { background: #ccc; } /* For all browser, except IE6/7 */
.block div.focus { *background: #ccc; } /* For IE6/7 */

You should repeat all styles for :focus on new line. And don't forget about star hack - *