После небольшого тестирования мне кажется, что IE не открывает выпадающий список, если стиль каким-либо образом изменен.
Да, хорошая ошибка ловить там. Все, что изменяет поле выбора (включая любое изменение стиля, даже одно, вызванное изменением родительского className), заставляет IE воссоздавать для него виджет OS, что имеет побочный эффект его закрытия. Таким образом, раскрывающийся список открывается, но сразу закрывается перед рендерингом. Если вы установите тайм-аут на функцию смены фона, вы увидите, что это произойдет потом.
То, что вам понадобится, - это сначала событие перед фокусировкой, так что вы можете изменить стиль, вызывая закрытие выпадающего меню до его открытия. К счастью, есть один ! Но это только для IE. Для других браузеров (включая IE8) лучше всего придерживаться простого селектора CSS :focus:
<style>
select { background-color: #BDE5F8; }
select:focus, select.focus { background-color: white; }
</style>
<select>
<option>choose...</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<!--[if lt IE 8]><script>
// Fix lack of :focus selector for select elements in IE7-
//
var selects= document.getElementsByTagName('select');
for (var i= selects.length; i-- >0;) {
var select= selects[i];
select.onfocusin= function() {
this.className= 'focus';
};
select.onfocusout= function() {
this.className= '';
};
}
// Or, the same expressed in jQuery, since you mentioned using it
//
$('select').bind('focusin', function() {
$(this).addClass('focus');
}).bind('focusout', function() {
$(this).removeClass('focus');
});
</script><![endif]-->