Cannot change Down Arrow

Anonymous

#263796

On the Choice Dropdowns, how do I change the down arrow? There is no :after or :before element which takes the current down arrow icon.

Page link: http://igastaging.wpengine.com/recipes/iga-christmas-2020/

Trevor

#263829

Ah, that we have little or no control over. Let me explain, and then offer a ‘Select’ replacement script as a possible solution (used by many themes).

One of the reasons so many themes/sites use ‘Select’ replacement scripts is that much of the formatting of standard select controls is done by the browser, and so you have little or no control over that.

The Chosen script is included with/used by our plugin by default. However, it is now pretty much abandoned and has not received any major updates in a long time. It has poor support for iOS devices for example.

In the current version of our plugin, there is an option in our settings page to choose which (Combobox) script to use.

Go to wp-admin -> Search & Filter -> Settings -> Combobox Script

Change this from Chosen to Select2

The Select2 script is then available for you to apply to the form. Select2 is maintained now by the WooCommerce team, who are, of course, owned by Automattic, the owners of WordPress, and as such is used by a lot of themes and plugins.

So, in the form field settings, select the combobox option for each. This will mean you may need to add the styling you want to these fields.

There is an alternate way of doing this, but this is the easiest. Now you can style the resulting select as it is not a select!

This post shows the complete Select2 CSS that we already include in our plugin:

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

At the end is an example of how to modify it.

[Author]

Posts