Styling Default Select DropDown Fields

The default dropdown select field form element is difficult to style in CSS alone – it needs a bit of jQuery love, here is a guide to add some cleaner styling to change default dropdown sort select fields.

default-select-dropdown

Default Select Sort Field

 

Then one with some jQuery magic…

Sort select field looks a little better on this one

Using select2.js

So the above select field was transformed by using select2 which has a number of features manipulating the HTML select element.

Download the latest version from Github and unzip, you need to get 2 files to get up and running..

  • dist/css/select2.min.css
  • dist/js/select2.min.js

Using WordPress in this example add these to your WordPress child themes folder and also create a select2-init.js file in your js folder – so your structure will be…

  • yourtheme/css/select2.min.cs
  • yourtheme/js/select2.min.js
  • yourtheme/js/select2-init.js

Set Up Scripts in functions.php

 

Select the field to target

In the select2-init.js file the ‘.woocommerce-ordering select’ field is targetted. Further jQuery parameters can be found on the select2.js page and Github.

 

default-select-dropdown-jquery-selectize

That’s it – you can target other select fields if required and also further style the select field by editing your CSS file.

Select2 shows a search box by default at the top of the dropdown, you can remove this by adding an option into the parameters.

$('.woocommerce-ordering select').select2({
	minimumResultsForSearch: Infinity
});

If you are actually wanting to do the WooCommerce dropdowns or have WooCommerce running you can use their fork of select2 called selectWoo to do the styling.

3 Comments

  1. Ares on April 25, 2023 at 2:28 pm

    Does it still work? I tried it on the default Store Front theme but it doesn’t work.
    I work on a local host website. Please can you help?

  2. Pavlo on August 25, 2020 at 10:56 am

    Hi, thank you for your plugin :)
    I have a little problem with plugin in chrome browser.
    Everesing working well, except one thing – when I click on list,
    items appear and showing during I keep the button on the mouse, and disappear
    when I hang off.
    I want that this still appear after one click and disappear after another click, maybe you have some solutions for this problem

    • Pavlo on August 25, 2020 at 11:10 am

      The solution was a clear my browser cach :)
      have a nice day :)

Leave all Comment