如何更改下拉菜单的样式

Question

I have a dropdown menu that I just can't figure out how to change...

You can see it by going to http://www.escalatehosting.com/signup and entering any domain name and then selecting to continue after choosing a billing cycle.

On the registration form you'll be able to see the dropdown menu is fancy looking for the "Country" option. I'm trying to do the same thing for the "State/Region" dropdown but can't figure out what to change...

Here is the code being used for the registration form:

<tr><td class="fieldlabel">{$LANG.clientareafirstname}</td><td class="fieldarea">{if $loggedin}{$clientsdetails.firstname}{else}<input type="text" name="firstname" tabindex="1" style="width:300px;" value="{$clientsdetails.firstname}" />{/if}</td><td class="fieldlabel">{$LANG.clientareaaddress1}</td><td class="fieldarea">{if $loggedin}{$clientsdetails.address1}{else}<input type="text" name="address1" tabindex="7" style="width:300px;" value="{$clientsdetails.address1}" />{/if}</td></tr>
<tr><td class="fieldlabel">{$LANG.clientarealastname}</td><td class="fieldarea">{if $loggedin}{$clientsdetails.lastname}{else}<input type="text" name="lastname" tabindex="2" style="width:300px;" value="{$clientsdetails.lastname}" />{/if}</td><td class="fieldlabel">{$LANG.clientareaaddress2}</td><td class="fieldarea">{if $loggedin}{$clientsdetails.address2}{else}<input type="text" name="address2" tabindex="8" style="width:300px;" value="{$clientsdetails.address2}" />{/if}</td></tr>
<tr><td class="fieldlabel">{$LANG.clientareacompanyname}</td><td class="fieldarea">{if $loggedin}{$clientsdetails.companyname}{else}<input type="text" name="companyname" tabindex="3" style="width:300px;" value="{$clientsdetails.companyname}" />{/if}</td><td class="fieldlabel">{$LANG.clientareacity}</td><td class="fieldarea">{if $loggedin}{$clientsdetails.city}{else}<input type="text" name="city" tabindex="9" style="width:300px;" value="{$clientsdetails.city}" />{/if}</td></tr>
<tr><td class="fieldlabel">{$LANG.clientareaemail}</td><td class="fieldarea">{if $loggedin}{$clientsdetails.email}{else}<input type="text" name="email" tabindex="4" style="width:300px;" value="{$clientsdetails.email}" />{/if}</td><td class="fieldlabel">{$LANG.clientareastate}</td><td class="fieldarea">{if $loggedin}{$clientsdetails.state}{else}<input type="text" name="state" tabindex="10" style="width:300px;" value="{$clientsdetails.state}" />{/if}</td></tr>
<tr>{if !$loggedin}<td class="fieldlabel">{$LANG.clientareapassword}</td><td class="fieldarea"><input type="password" name="password" tabindex="5" id="newpw" style="width:300px;" value="{$password}" /></td>{else}<td class="fieldlabel"></td><td class="fieldarea"></td>{/if}<td class="fieldlabel">{$LANG.clientareapostcode}</td><td class="fieldarea">{if $loggedin}{$clientsdetails.postcode}{else}<input type="text" name="postcode" tabindex="11" style="width:300px;" value="{$clientsdetails.postcode}" />{/if}</td></tr>
<tr>{if !$loggedin}<td class="fieldlabel">{$LANG.clientareaconfirmpassword}</td><td class="fieldarea"><input type="password" name="password2" tabindex="6" style="width:300px;" value="{$password2}" /></td>{else}<td class="fieldlabel"></td><td class="fieldarea"></td>{/if}<td class="fieldlabel">{$LANG.clientareacountry}</td><td class="fieldarea">{if $loggedin}{$clientsdetails.country}{else}{$clientcountrydropdown|replace:'<select':'<select tabindex="12" style="width:285px;"'}{/if}</td></tr>
<tr><td colspan="2" class="fieldarea">{if !$loggedin}<script language="javascript">showStrengthBar();</script>{/if}</td><td class="fieldlabel">{$LANG.clientareaphonenumber}</td><td class="fieldarea">{if $loggedin}{$clientsdetails.phonenumber}{else}<input type="text" name="phonenumber" tabindex="13" style="width:300px;" value="{$clientsdetails.phonenumber}" />{/if}</td></tr>

This is the code for the Country drop down that looks how I want:

<td class="fieldlabel">{$LANG.clientareacountry}</td><td class="fieldarea">{if $loggedin}{$clientsdetails.country}{else}{$clientcountrydropdown|replace:'<select':'<select tabindex="12" style="width:285px;"'}{/if}</td>

This is the code that I don't know how to fix for the State dropdown that I don't know how to fix and make it look like the Country dropdown.

<td class="fieldlabel">{$LANG.clientareastate}</td><td class="fieldarea">{if $loggedin}{$clientsdetails.state}{else}<input type="text" name="state" tabindex="10" style="width:300px;" value="{$clientsdetails.state}" />{/if}</td>

Any help with this would be really appreciated...

Answer 1

这是一个花哨的引导主题，您的选择选项可以使用此引导选择

Answer 2

The main issue here is that the class "selectboxit-text" is not applied to your state dropdown. I'd recommend checking the css file.

Answer 3

The style of Country selection uses an ul and li s

Try using this instead of select and input: <ul> with this class -> class="selectboxit-options dropdown-menu"

For the first option item in the list: <li> with this class -> class="selectboxit-option selectboxit-option-first active"

For the other items: <li> with this class -> class="selectboxit-option"

Answer 4

国家/地区下拉列表是通过jQuery生成的，您可以在下拉菜单中使用该类。