Styling the Search Bar Widget

GravityView includes a Search Bar widget that you can add to your View to improve your navigation among entries. Sometimes you may need to override the search bar default styling by adding your own custom CSS.

Search Bar widget without any styles applied (Divi theme):

Search Bar widget after applying custom styles:

Styling the Search Bar with Custom CSS

Note: Consult our CSS guide for a list of all the CSS IDs and classes used in GravityView, grouped by element type.

As you can see, the outer container <div> has a different class depending on whether you're displaying a horizontal or vertical search bar.

• Horizontal: .gv-search-horizontal
• Vertical: .gv-search-vertical

To style the search box, you need to target the search input inside the   .gv-search-box default search container.

.gv-search-box input[type=search] { // your CSS code here }

To add focus styles to the search box, use the CSS :focus selector, like so:

.gv-search-box input[type=search]:focus { // your CSS code here }

Styling the Search Button

To style the search button, target the .gv-search-button class, like so:

.gv-search-box .gv-search-button { // your CSS code here }

You can add hover styles to the button using the CSS :hover selector.

.gv-search-box .gv-search-button:hover { // your CSS code here }

Note: Add cursor:pointer, to force the mouse to change to a hand when hovering over the search button.

Styling Additional Search Fields

The GravityView Search Bar widget supports multiple search fields. You can add new input fields to the by opening the Widget Settings and clicking on the green plus icon.

Regular search fields are text inputs rather than search inputs: 

.gv-search-box input[type=text] { // your CSS code here }

If you want to change the label font and size, you can target the label element:

.gv-search-box label { // your CSS code here }

Example Styles

/* Container */
.gv-search-horizontal {
	box-shadow: 0px 0px 5px 2px #b3b3b3;
	padding:20px;
	border-radius:17px;
}

/* search bar */
.gv-search-box input[type=search] {
    	border-radius: 10px;
    	height: 50px;
    	width: 100%;
    	padding: 5px 10px 5px 10px;
	background-color: #fff;
	border: 5px solid #55aef6;
}
.gv-search-box input[type=text]:focus {
	border-color:#0d8bf2;
	box-shadow: 2px 2px 5px 2px #bfbfbf;
}

/* labels */
.gv-search-box label {
	font-size:20px;
	font-family:'Montserrat',sans serrif;
}

/* search button */
.gv-search-box .gv-search-button {
	background-color: #55aef6; 
 	border: 2px solid #55aef6;
	border-radius:10px;
  	color: #ffffff;
  	padding: 15px 32px;
  	text-align: center;
  	text-decoration: none;
  	font-size: 18px !important;
	font-family:'Montserrat',sans serrif;
	font-weight:500;
}
.gv-search-box .gv-search-button:hover {
	background-color: #0d8bf2;
	border: 2px solid #0d8bf2;
	cursor:pointer;
}

Not sure how to add custom CSS to your website? Read Adding custom CSS to your website.