Support Forums

There is a new way to get support - via the support tab in your account.

Our support systems are changing, for the better. You'll be able to manage all your support requests from your account, and respond to any tickets via email.

These support forums are now closed - existing tickets will be closed after a month.

Forums Forums Search & Filter Pro Customizing select

Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • laboussole
    #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 Moderator
    #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.

    laboussole
    #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 Moderator
    #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?

    laboussole
    #188278

    Ok, I got it!

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

    Thanks again!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.