Styling the Search Bar Widget

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

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

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.

The Search Bar widget settings with a box drawn around the add field (+) and remove field (-) icons.

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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.