CSS dropdown option/active hover

Anonymous

#249821

Thanks for a great plugin. I’ve been able to customize css for most everything except option/active hover background and border for dropdowns. Test site is eyequest.tfgre.com/test/ — S&F form is just below slider. Thanks for your review & assistance.

Trevor

#249850

Can you show me one or more annotated screenshot(s) of the design change(s) you want? If you can do that, you would need to upload the screenshot image(s) to a file sharing site (like the WordPress Cloudup site) and share the link with me?

Please note that we are now closed for the day as it is gone 5PM here in the UK. For any further replies, I will be back on again tomorrow.

Anonymous

#249862

This reply has been marked as private.

Trevor

#249903

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. If you change this to Select2, that script is then available for you to apply to the form (see below for how). 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.

If you want the select box with a search box at the top, you need to add this JavaScript to the page:

<script>
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('select.sf-input-select').select2();
  });
}(jQuery));
jQuery(document).ready(function($){
  $('select.sf-input-select').select2();
});
</script>

If you want it without the search box at the top of the select boxes, then this:

<script>
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('select.sf-input-select').select2({minimumResultsForSearch: -1});
  });
}(jQuery));
jQuery(document).ready(function($){
  $('select.sf-input-select').select2({minimumResultsForSearch: -1});
});
</script>

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.

Anonymous

#249933

Thanks for the update and guidance, Trevor. With your reply, I recall seeing several threads on the Select2 replacement while researching this change. I will have a look and post back for further assistance as needed.

Trevor

#249938

OK. I will wait for you to get back to me. Let me know if I can close the thread?

Anonymous

#249991

It was tedious, but got there. OK to close this thread … although I may need to open another for search items not being returned.

[Author]

Posts