Customize Search and Submit Design

Anonymous

#214518

Greetings,

Is there a way to customize the design of the search and submit section, regarding the colors, borders width or length?

Thank you in advance!

Trevor

#214540

This reply has been marked as private.

Anonymous

#214556

Thank you for your immediate response!

I can’t edit the boxes separately, CSS changes the whole section.

In case you can’t see the CSS screenshot I shared, the CSS code is:
.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 0px;
}

Thank you in advance!

Anonymous

#214558

In my last post, “that’s how it currently appears” should be above another screenshot of my website that has one box for text search and a category drop down box with different height and default design.

How can I customize them separately ? Because this custom CSS in elementor only lets me edit the whole section.

Trevor

#214679

This reply has been marked as private.

Anonymous

#214769

Here is the screenshot of my Website’s search page: https://ibb.co/4Sv82dD

Trevor

#214788

Thank you. It is possible, but as I have said before, I need the live link/URL to your search page so I can take a look and write the CSS for you.

Anonymous

#214851

Sorry for the misunderstanding, here is the live link to my search page: http://18.196.163.150

Trevor

#214887

Does this custom CSS help:

.searchandfilter > ul {
  display: flex;
}
.searchandfilter > ul > li.sf-field-search {
  flex-grow: 0;
  min-width: 190px;
}
.searchandfilter > ul > li.sf-field-search input {
  padding: 13px;
}
.searchandfilter > ul > li.sf-field-category {
  flex-grow: 1;
}
.searchandfilter > ul > li.sf-field-submit {
  flex-grow: 0;
  min-width: 165px;
}
.searchandfilter > ul > li.sf-field-submit input {
  padding: 20px 40px;
}

Trevor

#214889

I re-posted the CSS, as a bit was missing.

[Author]

Posts