select box focus css ie behaviour
I have a cms sytem being developed in asp.net usinf visual studio. The application will be restricted to being used by IE 6, 7, 8
I am trying to get form elements to have a background colour which changes to white when the elements get focus.
I can do this for textboxes with no problem, but with select boxes it is an entriely different matter.
Here is the css:
.textbox {
border:solid 1px #7f9db9;
padding:1 1 1 1;
background-color: #edf1f1;
}
.textbox-focus {
border:solid 1px #7f9db9;
padding:1 1 1 1;
background-color: #ffffff;
}
here is the jQuery:
$('input[type="text"]').focus(function() {
$(this).removeClass("textbox").addClass("textbox-focus");
});
$('input[type="text"]').blur(function() {
$(this).removeClass("textbox-focus").addClass("textbox");
});
$('select').focus(function() {
$(this).removeClass("textbox").addClass("textbox-focus");
});
$('select').blur(function() {
$(this).removeClass("textbox-focus").addClass("textbox");
});
Whenever a selectbox is clicked it doen not now reveal the options unless it is clicked a second time. I suspect the focus event that changes the css class stops IE displaying the options in its tracks.
How do I get jQuery/javascript to then display the options on the first selectbox click? Any help greatly appreciated.