# Supported CSS classes

You can change the style of the search widget to match your application. Use
the following CSS classes to customize the widget.

## Suggestions

Sample DOM structure:

    <div class="cloudsearch_suggestion_container">
      <img src="..." class="cloudsearch_suggestion_suggested_query_icon">
      <span class="cloudsearch_suggestion_suggested_query">...</span>
    </div>

| CSS Class | Notes |
|---|---|
| `cloudsearch_suggestion_overlay` |   |
| `cloudsearch_suggestion_container` |   |
| `cloudsearch_suggestion_suggested_query` |   |
| `cloudsearch_suggestion_suggested_query_icon` |   |
| `cloudsearch_suggestion_suggested_people_name` |   |
| `cloudsearch_suggestion_suggested_people_profile_image` |   |

## Results

Sample DOM structure:

    <div class="cloudsearch_result_container">
      <span class="cloudsearch_result_icon"></span>
      <div class="cloudsearch_result_title">
        <a href="...">...</a>
      </div>
      <div class="cloudsearch_result_metadata">...</div>
      <div class="cloudsearch_result_snippet">...</div>
    </div>

| CSS Class | Notes |
|---|---|
| `cloudsearch_result_container` |   |
| `cloudsearch_result_icon` |   |
| `cloudsearch_result_title` |   |
| `cloudsearch_result_snippet` |   |
| `cloudsearch_result_metadata` |   |

## Facets

Sample DOM structure:

    <div class="cloudsearch_facet_result_container">
      <div class="cloudsearch_facet_operator_container">
        <span class="cloudsearch_facet_result_operator_name">...</span>
      </div>
      <div class="cloudsearch_facet_bucket_container">
        <input type="checkbox" value="value"
               class="cloudsearch_facet_bucket_checkbox cloudsearch_facet_bucket_clickable">
        <span class="cloudsearch_facet_bucket_value">...</span>
        <span class="cloudsearch_facet_bucket_percentage">...</span>
      </div>
    </div>

| CSS Class | Notes |
|---|---|
| `cloudsearch_facet_bucket_clickable` | Indicates an element that toggles the selection of the filter |
| `cloudsearch_facet_bucket_selected` | Present on cloudsearch_facet_bucket_container if a filter is selected |
| `cloudsearch_facet_bucket_container` |   |
| `cloudsearch_facet_result_container` |   |
| `cloudsearch_facet_operator_container` |   |
| `cloudsearch_facet_result_operator_name` |   |
| `cloudsearch_facet_bucket_value` |   |
| `cloudsearch_facet_bucket_percentage` |   |

## Pagination

Sample DOM structure:

    <div class="cloudsearch_pagination_container">
      <div class="cloudsearch_pagination_center">
        <span class="cloudsearch_pagination_icon cloudsearch_pagination_icon_previous">
        </span>
        <span class="cloudsearch_pagination_text">...</span>
        <span class="cloudsearch_pagination_icon cloudsearch_pagination_icon_next">
        </span>
      </div>
    </div>

| CSS Class | Notes |
|---|---|
| `cloudsearch_pagination_container` |   |
| `cloudsearch_pagination_center` |   |
| `cloudsearch_pagination_icon` |   |
| `cloudsearch_pagination_icon_first` |   |
| `cloudsearch_pagination_icon_previous` |   |
| `cloudsearch_pagination_icon_next` |   |
| `cloudsearch_pagination_text` |   |

## Result counts

    <div class="cloudsearch_result_count_container">
      <span class="cloudsearch_result_count_text">...</span>
    </div>

| CSS Class | Notes |
|---|---|
| `cloudsearch_result_count_container` |   |
| `cloudsearch_result_count_text` |   |

## Sign-in prompt

Sample DOM structure:

    <div class="cloudsearch_sign_in_container">
      <div class="cloudsearch_sign_in_button">...</div>
      <div class="cloudsearch_sign_in_text">...</div>
    </div>

| CSS Class | Notes |
|---|---|
| `cloudsearch_sign_in_container` |   |
| `cloudsearch_sign_in_button` |   |
| `cloudsearch_sign_in_text` |   |