Binding jQuery event handler to `focus` makes select behave strange in IE

Why does this below jQuery binding of an eventhandler to the focus event have the side-effect that the user needs to click twice on the select-option do mak开发者_JAVA技巧e it drop down/up.

$('input, select, textarea').focus(function() {
  $(this).addClass('input_highlight');
}).blur(function() {
  $(this).removeClass('input_highlight');
});

This is only an issue for IE (tested in IE8), Chrome and FF behaves as expected.

My testcase, including all relevant css, can be seen here: jsFiddle sandbox example

Change it to use focusin and focusout instead of focus and blur.

http://jsfiddle.net/QG22b/

The .focus event is activated on IE only when you click on it (and not when your mouse comes over it).

Maybe you could use the mouseover event ?

Max