[Resolved] How to style the filter form in custom search view

[Author]

Posts

[chong-sumw]

I have a working custom search view with search box and dropdown menu as filter. What I want to do is to style the the dropdown and search box, for example, (1) change the rounded corner to rectangle, (2) change or remove the arrow on the right of dropdown (3) change the width of border etc

I have tried doing this with a css class but I couldn't change the border radius for example. I thought there should be a way to target the toolset element more precisely. Please help! thank you so much

page: front page
view id: 536

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - I would like to know here are you using Bootstrap? If no, What if you activate the Bootstrap loading setting from:
=> Toolset => Settings => General Tab => Bootstrap loading => Toolset should load the Bootstrap 3

[chong-sumw]

The bootstrap option had been activated before.

[Minesh]

Well - it looks like browser specific, I checked on chrome and I see the different view for dropdown box compare to screenshot you shared with your first reply. Please check below screenshot:
=> hidden link

To target the all filter control container div you should use the CSS class .form-control , you will see when you see the page source.

In addition to that, Styling is a customized thing that is vary user to user or site to site. You should try to follow the following where we shared:
https://toolset.com/documentation/user-guides/front-page-filters/#vfmh-styling-your-filter

You should try to create a test site on our free test platform discover-wp.com using available reference site:
=> https://discover-wp.com/register/?site_type=713&layouts=yes

And check how the search form is added and customized:
=> hidden link

More info:
=> https://toolset.com/faq/how-and-why-to-create-a-test-site-in-discover-wp/

[chong-sumw]

Thank you for your help!