Styling the Search Bar Widget

This guide explains how to style each type of input in the GravityView search bar. Use the class selectors below to apply custom styles to text inputs, select fields, checkboxes, radio buttons, number ranges, date fields, and the advanced search toggle.

Search container classes

.gv-widget-search

Description:

The main <form> wrapper for the entire search bar.

Use it to:

Style the search area background, padding, borders, or margins.

Example:

.gv-widget-search {
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.gv-widget-search-general-search

Description:

Wrapper for the main (non-advanced) search fields.

Use it to:

Target only the initial visible fields, excluding anything in the advanced section

Example:

.gv-widget-search-general-search {
  margin-bottom: 1.5rem;
}

.gv-widget-search-advanced-search

Description:

Wrapper for the hidden/expandable Advanced Search section.

Use it to:

Style the collapsed section or visually separate it.

Example:

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

.gv-search-box

Description:

Wraps each individual search field (text, select, checkbox, etc.)

Use it to:

Control field-level spacing and alignment.

Example:

.gv-search-box {
  margin-bottom: 1rem;
}

General "search everything" field (text input)

Selector:

.gv-search-field-search_all input[type="search"]

Example CSS:

.gv-search-field-search_all input[type="search"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

Link-based filters

Selector:

.gv-search-box-links a

Example CSS:

.gv-search-box-links {
  font-size: 0.95rem;
  color: #444;
}

.gv-search-box-links a {
  color: #0073aa;
  text-decoration: none;
  margin: 0 0.5rem;
  font-weight: 500;
}

.gv-search-box-links a:hover {
  text-decoration: underline;
  color: #005e8c;
}

Radio buttons

Selector:

.gv-search-field-radio input[type="radio"]

Example CSS:

.gv-search-field-radio input[type="radio"] {
  margin-right: 0.5rem;
}

.gv-search-field-radio label {
  margin-right: 1rem;
  font-weight: normal;
  cursor: pointer;
}

Checkbox fields

Selector:

.gv-search-field-checkbox input[type="checkbox"]

Example CSS:

.gv-search-field-checkbox input[type="checkbox"] {
  margin-right: 0.5rem;
}

.gv-search-field-checkbox label {
  display: inline-block;
  margin-right: 1rem;
  cursor: pointer;
}

Dropdown (select) fields

Selector:

.gv-search-field-select select

Example CSS:

.gv-search-field-select select {
  width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-size: 1rem;
}

Number range fields

Selector:

.gv-search-number-range input[type="number"]

Example CSS:

.gv-search-number-range input[type="number"] {
  width: 48%;
  padding: 0.5rem;
  margin-right: 4%;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.gv-search-number-range input[type="number"]:last-child {
  margin-right: 0;
}

Date and date range fields

Selectors:

• Single date:

.gv-search-date input[type="text"]

• Date range:

.gv-search-date-range input[type="text"]

Example CSS:

.gv-search-date input[type="text"],
.gv-search-date-range input[type="text"] {
  width: 48%;
  padding: 0.5rem;
  margin-right: 4%;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.gv-search-date-range input[type="text"]:last-child {
  margin-right: 0;
}

Geolocation search field

Address autocomplete input:

.gk-maps-search-geolocation-address-autocomplete

Radius select:

.gk-maps-search-current-geolocation-radius

Unit select:

.gk-maps-search-current-geolocation-unit

Current location button:

.gk-maps-search-current-geolocation

Example CSS:

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

.gk-maps-search-current-geolocation {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 0.5rem;
  padding: 0.25rem;
}

.gk-maps-search-current-geolocation svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #444;
}

Advanced search toggle

Toggle link:

#gv-search-advanced-toggle

Advanced container (collapsible):

#gv-search-advanced

Example CSS:

#gv-search-advanced-toggle {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.9rem;
  text-decoration: underline;
  color: #0073aa;
  cursor: pointer;
}

#gv-search-advanced {
  margin-top: 1rem;
  display: none; /* Hidden by default; shown when expanded */
}

Submit button

Selector:

.gv-search-button

Example CSS:

.gv-search-button {
  background-color: #0073aa;
  color: #fff;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

.gv-search-button:hover {
  background-color: #005e8c;
}