How to customize Frase Site Search with custom CSS

This is a guide to the CSS selectors inside Frase Site Search. If you're not sure what CSS selectors are, please refer to this guide.

Writing custom CSS is advanced. We make this stuff available, but it's really hard to provide support for it. Please make sure you or someone on your team is comfortable editing CSS before you begin.

CSS Selectors:

These are the main IDs and Classes you can target to add custom CSS:

#frase-search

The parent container.

#frase-search-input

The input element.

#frase-search-autosuggest

The container that loads the autosuggest dropdown.

#frase-search-autosuggest .item

Each of the results offered in the autosuggest dropdown.

#frase-search-autosuggest .item-header

The header for each result in the autosuggest dropdown.

#frase-search-autosuggest .item-snippet

The short text snippet for each result in the autosuggest dropdown.

#frase-search-autosuggest .item-path

The URL path for each result in the autosuggest dropdown.