0 items
Sign in
Buy

Docs

Styling the Search Bar widget

Estimated reading: 8 minutes

Updated on November 11, 2026

Every part of the Search Bar has a class name, so you can restyle all of it with CSS: its rows, the fields and their names, the buttons, and the Advanced Search section.

Where to put the CSS #

Add your rules to the View’s Custom CSS field, on the Custom Code tab of the Settings box. On a Vantage View, GravityView limits each rule to that View and gives it enough weight to win over the Vantage styles without !important. For example, a rule for .gv-search-button restyles this View’s button and leaves other Views alone.

The Search Bar is outside the part of the View that the VIEW_SELECTOR placeholder matches. When a rule needs a placeholder, start it with VIEW_WRAPPER. Adding custom CSS to your Views explains the field, its placeholders, and how Legacy Views treat your rules.

How the Search Bar is built #

A class schedule's Search Bar with five numbered outlines: the Class field, the Search button, the Clear link, the Advanced Search link and the Evening choice of a checkbox field
  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 field’s Custom CSS Class setting adds your class to this box.
  2. The Search button: .gv-search-button.
  3. The Clear link: .gv-search-clear. Using the Search Bar “Clear” button explains when it shows and what it does.
  4. The Advanced Search link: #gv-search-advanced-toggle. It opens #gv-search-advanced, which holds the fields placed in Advanced Search fields shown.
  5. A choice in a radio or checkbox field: a <label class="gv-check-radio"> around its input.

The whole bar is a <form class="gv-widget-search">. Each row you add in Search Bar Settings is a div.gv-grid-row. Each column in a row is a div.gv-grid-col-* named for its width, such as gv-grid-col-1-1 for a full row and gv-grid-col-1-2 for half of one.

Inside each column, a div.gv-search-widget-area holds the fields. The column that holds the Submit Button also has the class gv-search-col-submit. A column’s Column Settings add classes to its gv-search-widget-area:

  • Arrange Fields set to Side by side (horizontal) adds gv-search-horizontal.
  • Number of Columns set to a number adds gv-search-columns- with that number, such as gv-search-columns-2.

In markup, a Search Bar with one row and one field looks like this:

<form class="gv-widget-search gv-search-rows">
  <div class="gv-widget-search-general-search gv-grid">
    <div class="gv-grid-row">
      <div class="gv-grid-col-1-1">
        <div class="gv-search-widget-area gv-search-horizontal">
          <div class="gv-search-box gv-search-field-text my-class">
            <label for="search-box-filter_1">Class</label>
            <p><input type="text" id="search-box-filter_1"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a id="gv-search-advanced-toggle">…</a>
  <div id="gv-search-advanced">…</div>
</form>

Fields that hold a group of inputs, such as checkboxes, radio buttons, a date or a number range, are a <fieldset> with a <legend> for their name. The other fields are a <div> with a <label>, so name both in your selectors: .gv-search-box label, .gv-search-box legend.

Selectors by field type #

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

The GravityView CSS guide lists the class of every field type, button and area of the Search Bar. Its Live Filters section covers the Live Filters sidebar, which a Vantage View styles through ::part() names and custom properties of its own.

Examples #

Give text inputs, number inputs, and dropdowns 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;
}

Style the field names of every field type:

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

Put the choices of radio and checkbox fields side by side. They wrap to the next line when the column is too narrow:

.gv-search-field-radio p,
.gv-search-field-checkbox p {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem 1.25rem;
}

The date picker takes its colors, border, and corner radius from custom properties. Set them on the picker and on the calendar that opens from it:

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

Style 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; }

On a View that uses the Vantage theme, a background color set this way stays the same when the pointer is over the button. Setting the button’s color tokens instead keeps a hover color:

VIEW_WRAPPER {
  --gv-button-bg: #0073aa;
  --gv-button-bg-hover: #005e8c;
  --gv-button-color: #fff;
}

Space out the Advanced Search link and the section it opens. Leave display alone on the section: GravityView shows and hides it with the gv-search-advanced--open class.

#gv-search-advanced-toggle {
  margin-top: 1rem;
  font-weight: 600;
}

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

To style one field only, give it a class through its Custom CSS Class setting. Here the Instructor field has the class instructor-filter:

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

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

For the Geolocation Radius field of Maps, style the address box and the current location button beside it:

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

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

When a rule has no effect #

On a Vantage View, GravityView’s Search Bar styles load after your theme’s stylesheet, and their selectors are at least as specific as a short rule. A theme rule for the field names, a text box border, or the Search button’s background then has no effect, even with .gv-themed in front of it. These work instead:

  • Put the rule in the View’s Custom CSS field, where it wins over the Vantage styles on that View.
  • For a color that Vantage takes from a design token, set the token on .gv-themed in your theme’s stylesheet. For example, .gv-themed { --gv-button-bg: #0073aa; } sets the background of the Search button. The GravityView CSS guide explains the tokens.

Write selectors without the element name, .gv-search-box rather than div.gv-search-box. A field with a group of inputs is a <fieldset>, and a selector tied to div doesn’t match it.

Was this page helpful?

Table Of Contents