Combobox style not working on focus

Hi,

I have an Ajax ComboBox

<ajax:ComboBoxID="MyComboBox"runat="server"DropDownStyle="DropDown"Width="60"TabIndex="13"CssClass="MyComboBoxStyle">
<asp:ListItem>HTA</asp:ListItem>
</ajax:ComboBox>

and the following styles in the stylesheet

/* ComboBox textbox style */
.MyComboBoxStyle .ajax__combobox_textboxcontainerinput{border:thinsolid#31659C;border-right:0none;}

/* ComboBox button style */
.MyComboBoxStyle .ajax__combobox_buttoncontainerbutton{background-color:#31659C;border:thinsolid#31659C;}

/* ComboBox focus textbox style */
.MyComboBoxFocusStyle .ajax__combobox_textboxcontainerinput{
background-color:#FFCC99;
border:thinsolid#FF6600;
border-right:0none;
font-weight:bold;
}

/* ComboBox focus button style */
.MyComboBoxFocusStyle .ajax__combobox_buttoncontainerbutton{
background-color:#FF6600;
border:thinsolid#FF6600;
}

I am trying to change the combobox style when it gets focus

$(document).ready(function() {
      $("#<%= MyComboBox.ClientID%>").focus(function() {
            $(this).addClass("MyComboBoxFocusStyle");
    });

    $("#<%= MyComboBox.ClientID%>").blur(function() {
       $(this).removeClass("MyComboBoxFocusStyle");
    });
});

For some reason the combobox style is not changing when it gets focus. Tried replacing

$(this).addClass("MyComboBoxFocusStyle"); with

$(("#<%= MyComboBox.ClientID%>").addClass("MyComboBoxFocusStyle");

What is it that I am not doing correctly.

Thanks

Rajat