Javascript and CSS Styling

Anonymous

#194224

It would be great if there was an ‘out of the box’ styling to the dropdowns.
Is there a recommended way to add styling as per these methods or similar? See:
https://speckyboy.com/open-source-css-javascript-select-box-snippets/

Trevor

#194265

The most common styling ‘system’ applied to WordPress form select boxes is called Select2. It is used by a lot of plugins, even WooCommerce, and is mainated by the WooCommerce team (who are owned by Automattic, the owners of wordpress.com).

We distribute this with our plugin. If you go to Seach & Filter -> Settings, you will see a setting for Combobox script. Set this to Select2. Whilst we normally only apply it to comboboxes, you can, relatively easily, apply it to normal dropdowns as well.

These threads might help you:

https://support.searchandfilter.com/forums/topic/customizing-select/

https://support.searchandfilter.com/forums/topic/customise-dropdown-combobox/

Anonymous

#194292

Thanks! That was SO simple – maybe that should be your factory default!

I only needed to switch to ‘Select2’, as you described, and then I added one line of javascript:

jQuery(document).ready(function($){
 $('select.sf-input-select').select2();
});

and it seemed to work immediately!

[Author]

Posts