How do I re-format the state dropdowns?

[daddysauce]

What I am doing is working on designing a template for a hostbill business.  I'm starting from the nextgen_clean template and working my way out of it. 

On the registration, profile, and a couple other pages there are forms that are generated.  Within these forms there are "state" dropdowns that look like were initially INPUTS but with JS were changed to SELECT dropdowns.  I believe this is done via a script that is loaded in the header using the Smarty function call {userheader}.

My question:     Is there a way to edit this script so that I can re-format how the select dropdown looks?  For the life of me I cannot find where this function creates this script code.

[daddysauce]

Since there are no responses to this question, am I asking this in the correct location?   Or is editing this not an option?

[hbillclient]

Hi daddysauce,

The forms in hostbill are using this jQuery plugin "Chosen" -  a Select Box Enhancer for jQuery. You can find the related js files in the specific template, for eg. in ajax.signup.tpl at the end you can find script references to chosen.min.js and singup.js(ignore the spelling by hostbill, should have been 'signup.js').

It seems however that the plugin is been used to style only the 'country' field. However you could try assign the same class used by 'country' field for other select fields and configure 'Chosen' with options.

Refer the following link:

https://harvesthq.github.io/chosen/options.html

Or you can style the other select fields by specifying a class for the select code inside the desired template, for eg. in ajax.signup.tpl, you will find this code:

{elseif $field.field_type=='Select'}
<select name="{$k}" style="width: 90%;" id="field_{$k}" >

You could define a custom class inside css/main.css for the desired template and add the class like this:

<select name="{$k}" style="width: 90%;" id="field_{$k}" class="custom class">

and you can even try to select specific select field, for eg. for state field, try adding this css class to main.css with your styling:

#field_state
{
--css styling--
}

Hope this helps you. Just let me know once you test it.

Thanks.