Styling a parametric filter inputs is the same as styling ordinary HTML. Looking at the link you shared with me to style checkbox, It depends on your expectation and functionality you are expecting. If you are just getting started with parametric filters and its styling. I suggest you will read this tutorial:
https://toolset.com/documentation/user-guides/front-page-filters/
For styling, please scroll down on that tutorial to "Styling Parametric Search Forms". The technique is to give your HTML elements the necessary classes or IDs so you can easily style them with CSS. You will find the example under the section "Styling Parametric Search Forms".
wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="idoc-properties-search">
<div class="sbox">
<label>City</label>
[wpv-control field="city" url_param="city"]
</div>
<div class="sbox">
<label>State</label>
[wpv-control field="state" type="select" values=" ,NY,CA,IL,FL,WA" display_values=" ,NY,CA,IL,FL,WA" url_param="state"]
</div>
<div class="sbox">
<div class="one_half">
<label>SQ FT From</label>
[wpv-control field="squarefeet" url_param="sqfeetmin"]
</div>
<div class="one_half">
<label>SQ FT To</label>
[wpv-control field="squarefeet" url_param="sqfeetmax"]
</div>
</div>
<div class="sbox checkbox">
<label>Bedrooms</label>
[wpv-control field="bedrooms" type="checkboxes" values="1,2,3,4,5,6" display_values="1,2,3,4,5,6" url_param="beds"]
</div>
<div class="sbox">
<div class="one_half">
<label>Price Min</label>
[wpv-control field="price" type="select" values=",100000,200000,300000,400000,500000,600000,700000" display_values=",$100 000,$200 000,$300 000,$400 000,$500 000,$600 000,$700 000" url_param="pricemin"]
</div>
<div class="one_half">
<label>Price Max</label>
[wpv-control field="price" type="select" values=",100000,200000,300000,400000,500000,600000,700000" display_values=",$100 000,$200 000,$300 000,$400 000,$500 000,$600 000,$700 000" url_param="pricemax"]
</div>
</div>
<div class="sbox last">
[wpv-filter-submit name="Search"]
</div>
<div>
[/wpv-filter-controls]
[wpv-filter-end]
Please note that with the example code we have wrapped each of the controls (radio buttons, checkboxes) in divs with assigned classes , e.g. "sbox", "one_half". These are used in CSS styling.
However, we cannot exactly provide the actual custom CSS code that will provide the output based on your screenshot. We can only give advice on best practices/tips. If you want to know the exact CSS code that will output based on that screensot. Please contact our certified partners for help:
=> https://toolset.com/consultant/
Even you can play with our reference sites which is the best place to learn and try new things.
=> https://toolset.com/faq/how-and-why-to-create-a-test-site-in-discover-wp/
You can find sites with search form and learn how search form is styled.
=> http://discover-wp.com/site-templates/
=> hidden link
Refer to section "Step 7: Styling the search form"
=> https://toolset.com/documentation/user-guides/getting-started-views/part-7-building-a-parametric-search-with-views/
=> https://toolset.com/documentation/user-guides/getting-started-views/
Now - to style checkboxes if you use taxonomy as checkbox the HTML structure is different and when you use custom field as checkbox again HTML structure is different. Please contact our certified partners for help:
=> https://toolset.com/consultant/
This is all I've to offer you. Thank you.
