[Resolved] Style of the select in the search form

[Author]

Posts

[andreaD-4]

Hello, I'm using avada and toolset to build an ito web.
I'm working on the search form but the style of the one made with avada
hidden link
it is much more beautiful and modern.
I don't really like the one made with toolset
hidden link
is there the possibility of having the same style as that of avada of the select for the search?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Andrea,

Thank you for getting in touch.

While you may not be able to achieve a perfect 1 to 1 design setup, it is possible to carry over some aspects of the Avada's theme search design into Toolset.

You can allow me to have admin access to assist you with this. I've enabled the private fields for your next response.

Thanks,
Shane

[Juice Rocket®]

Up vote - I second this - would LOVE a better search, especially one that works like the Wikipedia search and auto-fills below as you type, and shows the featured image in the auto-results.

Thank you!

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Andrea,

Thank you for the credentials. I had a look at the search and saw that its mostly 1-1 now. All thats needed is to change the font color of the select field which can be done with the css below.

.wpv-filter-form select{
color: grey !important;
padding: 10px;
}

This is if you want the color of the font in the select field to appear grey like the avada builder.

Thanks,
Shane

[andreaD-4]

Hi Shane,
Thanks for your help.
If you open my two links with firefox you will see that the select is very different, not only the color but the whole select. Can Toolset be selected like Avada's?
a.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Andrea,

Unfortunately not, the issue with firefox is how it interprets the select dropdowns and how it is displaying the arrows. Avada on the other hand is using a custom structure for their select dropdown arrows hence why it is displayed as such in firefox.

Toolset dropdowns are rendered in the default css of the browser that is interpreting the select html. Hence why it looks different in chrome and firefox.

To counteract this you will need to write a conditional stylesheet for firefox so that the changes will only apply to firefox. Checking on a few forums this seems to be a known issue where it tries to style the items based on the OS and it looks particularly bad when viewed on Mac
hidden link

Thanks,
Shane

[andreaD-4]

My issue is resolved now. Thank you!