I have implemented a jquery widget on my asp.net webforms and am trying to adjust the height of the select control from the default 22px to 33px. I noticed in Google developer that the height is originally set like this:
The current height setting is located here:
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
font-family: Arial, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
height: 22px;
vertical-align: middle;
}
My proposed solution involves adding this CSS code:
<style type="text/css">
.ui-widget select {
height: 33px;
}
</style>
Here's how I've structured my HTML and JavaScript:
<div class="ui-widget"><select id="drpAccountSearch" runat="server" NAME="drpAccountSearch"></select></div>
//Configuring the account dropdown as an autocomplete combobox
$(document).ready(function() {
$( "#drpAccountSearch" ).combobox();
});
However, despite implementing these changes, the height remains at 22px instead of adjusting to 33px.
Thank you