Customizing select

Anonymous

#188102

Hello!
After the checkboxes, now is the select menu I would like to customize.

I would like the one on this page: https://dev.laboussole.coop/catalogue/
looks like this one: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select

Could you tell me again which classes to modify?

Thanks in advance!

Trevor

#188142

The problem that you face is that demo you show actually copies the original select form element and replaces it with a DIV based structure. There are a number of steps you need to take to go down that route.

Firstly, go to Wp admin -> Search and Filter -> Settings and change the Combobox script to select2.

Then, you need to go to the Select2 documentation and apply Select2 to each of the fields in the form (use the class sf-input-select to target them). I think that the jquery would look like this:

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

You may need to set some options on that as well.

Then you can start to style the fields.

Search and Filter includes the files needed for Select2 to work, and also some default styling.

Anonymous

#188270

Thank you for your answer! But actually, it’s too complicated for me.

I would especially like to change the select option: is it possible to modify only css, even if it means less customization?

Trevor

#188272

Standard select boxes do not allow much by way of customisation, and their styling varies depending on browser.

Try adding this plugin:

https://wordpress.org/plugins/custom-css-js/

And then add the javascript I gave you and see if that works?

Anonymous

#188278

Ok, I got it!

Your js seems to work. I’ll try to style it now.

Thanks again!

[Author]

Posts