GeneratePress Search Forms: CSS and Snippets for

If you ever try to style the search forms of your site, you will find lots of different CSS snippets that apply to a search form but not the one that you want to style.

I dug and tested the CSS snippets from different GP Forum Threads, I have included the ones that I could figure out what search form they are trying to style.

---

---

GeneratePress: CSS Snippets for Sidebar Search Form Widget

If you need to make the sidebar search form widget wider, you can use this CSS snippet

.inside-right-sidebar .widget_search > form > label {
    flex-grow: 1;
}

Source: GeneratePress

GeneratePress: CSS Snippets for Search Forms on 404 Pages and No Search Results Page

If you need to customize the search form on the 404 page or search result pages, you can style it in different ways by using

.entry-content .search-form {
  /* your custom CSS*/
}

.entry-content .search-field {
   /* your custom CSS*/
}

.entry-content .search-submit {
/* your custom CSS*/
}

This a CSS snippet if you want to increase or reduce the width, style the borders, the background color, and font size:

.entry-content .search-field {
  width: 500px;
  border-radius: 8px;
  background-color: #07294d;
  font-size: 22px;
}

If you want to hide the submit button you can try this

.entry-content .search-submit {
  display: none;
}

You can change the background color and font size with this CSS snippet

.entry-content .search-submit {
  background-color: #ff9900;
  font-size: 18px;
}

Hide Search Form on 404 Pages

If you want to hide the search on 404 Pages, this is what you are searching for:

.error404 .entry-content .search-form {
    display: none;
}