This reply has been marked as private.
To remove the search box on the fields, change them back to normal dropdown selects, and see this post (some of the suggestions I think you have done already):
https://support.searchandfilter.com/forums/topic/css-dropdown-option-active-hover/#post-249903
As to the font color, there should be some CSS snippets in this forum search that will help you:
https://support.searchandfilter.com/forums/search/searchandfilter+data-sf-form-id+color+select2/
I am not sure what you mean by “I would also like the arrow like I have right now instead of the ‘plus’ and ‘minus’ signs.” You already have dropdown arrows?
This Custom CSS should improve the layout:
.searchandfilter[data-sf-form-id="421"] ul {
padding-left: 0;
}
.searchandfilter[data-sf-form-id="421"] .sf-range-max,
.searchandfilter[data-sf-form-id="421"] .sf-range-min {
max-width: 110px;
}
Try adding this additional CSS:
.searchandfilter[data-sf-form-id="6646"] select.sf-input-select {
min-width: auto;
}
.searchandfilter[data-sf-form-id="6646"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="6646"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="6646"] .select2-container {
max-width: 100%;
}
That CSS looks wrong. The first bit of code you appear to need is this:
.searchandfilter[data-sf-form-id="6646"] ul {
padding-left: 0;
}
The CSS you gave me should surely be max-width, not min-width, if it is for mobile only?
And it is missing a pair of curly braces:
@media (min-width: 600px) {
.searchandfilter[data-sf-form-id="6646"] {
min-width: 50px;
}
}
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?
I think this custom CSS makes it look better?
.searchandfilter[data-sf-form-id="5450"] {
padding: 20px;
}
.searchandfilter[data-sf-form-id="5450"] > ul {
margin: 0;
}
.searchandfilter[data-sf-form-id="5450"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="5450"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="5450"] li[data-sf-field-input-type="select"] label,
.searchandfilter[data-sf-form-id="5450"] li[data-sf-field-input-type="select"] select,
.searchandfilter[data-sf-form-id="5450"] li[data-sf-field-input-type="daterange"] label,
.searchandfilter[data-sf-form-id="5450"] .select2-container {
min-width: 100%;
}
To make the form Horizontal, see here:
https://searchandfilter.com/documentation/getting-started/display-search-form/#making-your-search-form-horizontal
There are many other customising snippets in the forums:
https://support.searchandfilter.com/forums/search/searchandfilter+data-sf-form-id/
That code you tried will likely not work. Are you able to send me a live link/URL to your search page so I can take a look?
Is it OK to close this thread for now? If you do this forum search, you will find tons of snippets:
https://support.searchandfilter.com/forums/search/searchandfilter+data-sf-form-id/
Simple then:
.searchandfilter[data-sf-form-id="16337"] h4 {
font-size: 17px;
}
