Styling the Search Bar Widget

Every element of the search bar carries a class name, so all of it can be restyled with CSS: the fields, their names, the buttons and the Advanced Search section. This page covers where the CSS goes, how the search bar’s markup is put together, which selector reaches each type of field, and a set of complete examples to paste and adapt.

Where to put the CSS #

The usual place is the View itself. In the View editor, open the Custom Code tab of the Settings box and add your rules to the Custom CSS field. They load only on pages where that View renders, after GravityView’s own stylesheet, so they win over the defaults without !important. Adding custom CSS to your Views describes the field. Start a Search Bar rule with the VIEW_WRAPPER placeholder to limit it to that one View, for example VIEW_WRAPPER .gv-widget-search { … }. The VIEW_SELECTOR placeholder does not reach the Search Bar, because it matches only the part of the View that holds the entries. Rules meant for every View on the site belong in your theme’s stylesheet or in the Customizer’s Additional CSS.

To style one field and leave the others alone, give it a class of its own. Every search field has a Custom CSS Class setting, and the class lands on that field’s container.

How the search bar is built #

Every search field renders the same way, so one search bar shows all the parts. The numbers match the list below.

1. A field: a .gv-search-box with a second class for its type, gv-search-field-text here. Its name is on top and its input below. The Custom CSS Class setting adds your class to this box.
2. The Search button: .gv-search-button.
3. The Clear link: .gv-search-clear. It appears once a search is active, when the Clear option is on.
4. The Advanced Search link: #gv-search-advanced-toggle. It opens #gv-search-advanced, which holds the fields placed in the Advanced section.
5. A choice in a radio or checkbox field: a <label class="gv-check-radio"> wrapping its input.

The whole bar is a <form class="gv-widget-search">. The fields that are always visible sit in .gv-widget-search-general-search, the Advanced ones in #gv-search-advanced. In markup, a field looks like this:

<form class="gv-widget-search">
  <div class="gv-widget-search-general-search gv-grid">
    <div class="gv-search-box gv-search-field-text my-class">
      <label for="search-box-filter_3">City</label>
      <p><input type="text" id="search-box-filter_3"></p>
    </div>
  </div>
  <div id="gv-search-advanced">…</div>
</form>

<form class="gv-widget-search">
  <div class="gv-widget-search-general-search gv-grid">
    <div class="gv-search-box gv-search-field-text my-class">
      <label for="search-box-filter_3">City</label>
      <p><input type="text" id="search-box-filter_3"></p>
    </div>
  </div>
  <div id="gv-search-advanced">…</div>
</form>

The field name is a <label>. Fields that hold several inputs (radio buttons, checkboxes, date and number ranges) use a <label> too in GravityView 3.4.0 and earlier, and a <fieldset> with a <legend> in later releases, so name both in your selectors: .gv-search-box label, .gv-search-box legend.

Selectors by field type #

Combine the wrapper class with the input selector: .gv-search-field-select select, .gv-search-field-radio input[type="radio"], and so on. The wrapper class on its own styles the whole field, name included.

Examples #

Text inputs, number inputs and dropdowns, given one look:

.gv-widget-search input[type="search"],
.gv-widget-search input[type="text"],
.gv-widget-search input[type="number"],
.gv-widget-search select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

.gv-widget-search input[type="search"],
.gv-widget-search input[type="text"],
.gv-widget-search input[type="number"],
.gv-widget-search select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

Field names, on every field type and on both versions of the markup:

.gv-search-box label:not(.gv-check-radio),
.gv-search-box legend {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.gv-search-box label:not(.gv-check-radio),
.gv-search-box legend {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

Radio and checkbox choices, side by side with a gap between them:

.gv-search-field-radio .gv-check-radio,
.gv-search-field-checkbox .gv-check-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 1rem;
  cursor: pointer;
}

.gv-search-field-radio .gv-check-radio,
.gv-search-field-checkbox .gv-check-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 1rem;
  cursor: pointer;
}

The date picker. Its colours, border and corner radius come from custom properties on the picker’s root, and the calendar pop-up, which is attached to the end of the page rather than to the search bar, reads the same properties:

.gv-search-date .gk-calendar-root {
  --gk-filters-calendar-border: #ccc;
  --gk-filters-calendar-control-radius: 6px;
  --gk-filters-calendar-accent: #0073aa;
  --gk-filters-calendar-accent-hover: #005e8c;
}

.gv-search-date .gk-calendar-root {
  --gk-filters-calendar-border: #ccc;
  --gk-filters-calendar-control-radius: 6px;
  --gk-filters-calendar-accent: #0073aa;
  --gk-filters-calendar-accent-hover: #005e8c;
}

The Search button and the Clear link next to it:

.gv-search-button {
  background-color: #0073aa;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 0.6rem 1.25rem;
}

.gv-search-clear { margin-left: 1rem; }

.gv-search-button {
  background-color: #0073aa;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 0.6rem 1.25rem;
}

.gv-search-clear { margin-left: 1rem; }

The Advanced Search link and the section it opens. Style the section’s spacing and borders, and leave display alone, since GravityView shows and hides it through the gv-search-advanced--open class:

#gv-search-advanced-toggle {
  display: inline-block;
  margin-top: 1rem;
}

#gv-search-advanced {
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

#gv-search-advanced-toggle {
  display: inline-block;
  margin-top: 1rem;
}

#gv-search-advanced {
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

One field only, through its Custom CSS Class setting. Here the field was given the class city-filter:

.gv-search-box.city-filter {
  max-width: 240px;
}

.gv-search-box.city-filter input[type="text"] {
  text-transform: uppercase;
}

.gv-search-box.city-filter {
  max-width: 240px;
}

.gv-search-box.city-filter input[type="text"] {
  text-transform: uppercase;
}

The Maps geolocation field: the address box and the current location button beside it:

.gk-maps-search-geolocation-address-autocomplete {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.gk-maps-search-current-geolocation {
  background: none;
  border: 0;
}

.gk-maps-search-geolocation-address-autocomplete {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.gk-maps-search-current-geolocation {
  background: none;
  border: 0;
}

Two things to know #