I am sure there is a better way of doing this and I would prefer to set the styles using stylesheet instead of JQuery. However, for the time being my issue is resolved.
Many thanks Rion for staying with me. Please provide your feedback and any alternative if you come across one.
sharprajat
Member
1 Points
22 Posts
Re: Combobox style not working on focus
Feb 26, 2013 09:29 PM|LINK
Ok. I resolved it like this:
HTML
<ajax:ComboBox ID="TypeComboBox" runat="server" DropDownStyle="DropDown" Width="60" TabIndex="13" CssClass="PONComboBox" >
<asp:ListItem Selected="True">HTA</asp:ListItem>
<asp:ListItem >TSA</asp:ListItem>
</ajax:ComboBox>
Stylesheet
.PONComboBox .ajax__combobox_textboxcontainer input{border:thin solid #31659C;border-right:0 none;}
.PONComboBox .ajax__combobox_buttoncontainer button{background-color:#31659C;border:thin solid #31659C;}
JQuery
$("#<%= TypeComboBox.ClientID%>").find('input[type="text"]').focus(function() {
$("#<%= TypeComboBox.ClientID%>").find('input[type="text"]').css("border", "thin solid #FF6600");
$("#<%= TypeComboBox.ClientID%>").find("button").css("border", "thin solid #FF6600");
$("#<%= TypeComboBox.ClientID%>").find("button").css("background-color", "#FF6600");
});
$("#<%= TypeComboBox.ClientID%>").find('input[type="text"]').blur(function() {
$("#<%= TypeComboBox.ClientID%>").find('input[type="text"]').css("border", "thin solid #31659C");
$("#<%= TypeComboBox.ClientID%>").find("button").css("border", "thin solid #31659C");
$("#<%= TypeComboBox.ClientID%>").find("button").css("background-color", "#31659C");
});
And the rendered HTML is
<div id="ctl00_BodyContentPlaceHolder_ctlTicketInfo_TypeComboBox" class="PONComboBox" style="display:inline;">
<table id="ctl00_BodyContentPlaceHolder_ctlTicketInfo_TypeComboBox_TypeComboBox_Table" class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" border="0" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline;position:relative;top:5px;">
<tr>
<td class="ajax__combobox_textboxcontainer"><input name="ctl00$BodyContentPlaceHolder$ctlTicketInfo$TypeComboBox$TypeComboBox_TextBox" type="text" id="ctl00_BodyContentPlaceHolder_ctlTicketInfo_TypeComboBox_TypeComboBox_TextBox" tabindex="13" autocomplete="off" style="width:60px;" /></td><td class="ajax__combobox_buttoncontainer"><button id="ctl00_BodyContentPlaceHolder_ctlTicketInfo_TypeComboBox_TypeComboBox_Button" type="button"></button>
</td>
</tr>
</table>
<ul id="ctl00_BodyContentPlaceHolder_ctlTicketInfo_TypeComboBox_TypeComboBox_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
<li>HTA</li>
<li>TSA</li>
</ul><input type="hidden" name="ctl00$BodyContentPlaceHolder$ctlTicketInfo$TypeComboBox$TypeComboBox_HiddenField" id="ctl00_BodyContentPlaceHolder_ctlTicketInfo_TypeComboBox_TypeComboBox_HiddenField" value="0" />
</div>
I am sure there is a better way of doing this and I would prefer to set the styles using stylesheet instead of JQuery. However, for the time being my issue is resolved.
Many thanks Rion for staying with me. Please provide your feedback and any alternative if you come across one.
Regards
Rajat