---
title: "Styling the Search Bar Widget"
date: 2026-04-23
author: "GravityKit"
link: "https://www.gravitykit.com/docs/gravityview/customizing-your-views/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 `` wrapper for the entire search bar.

**Use it to:**

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

**Example:**

```

```

```

```

### `.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-advanced-search` 

**Description:**

Wrapper for the hidden/expandable **Advanced Search** section.

**Use it to:**

Style the collapsed section or visually separate it.

**Example:**

```

```

```

```

### `.gv-search-box` 

**Description:**

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

**Use it to:**

Control field-level spacing and alignment.

**Example:**

```

```

```

```

---

## General "search everything" field (text input)

**Selector:**

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

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

**Example CSS:**

```

```

```

```

---

## Link-based filters

**Selector:**

```
.gv-search-box-links a
```

```
.gv-search-box-links a
```

**Example CSS:**

```

```

```

```

---

## Radio buttons

**Selector:**

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

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

**Example CSS:**

```

```

---

## Checkbox fields

**Selector:**

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

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

**Example CSS:**

```

```

---

## Dropdown (select) fields

**Selector:**

```
.gv-search-field-select select
```

```
.gv-search-field-select select
```

**Example CSS:**

```

```

```

```

---

## Number range fields

**Selector:**

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

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

**Example CSS:**

```

```

---

## Date and date range fields

**Selectors:**

- Single date:

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

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

- Date range:

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

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

**Example CSS:**

```

```

---

## Geolocation search field

**Address autocomplete input:**

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

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

**Radius select:**

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

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

**Unit select:**

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

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

**Current location button:**

```
.gk-maps-search-current-geolocation
```

```
.gk-maps-search-current-geolocation
```

**Example CSS:**

```

```

```

```

---

## Advanced search toggle

**Toggle link:**

```
#gv-search-advanced-toggle
```

```
#gv-search-advanced-toggle
```

**Advanced container (collapsible):**

```
#gv-search-advanced
```

```
#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 */
}
```

```
#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
```

```
.gv-search-button
```

**Example CSS:**

```

```