# Advanced CSS
Here is the full breakdown of the HTML and CSS that the Keyword Search snippet injects into your site.
## Search Box CSS
```css
.bz-autocomplete {
position: relative;
z-index: 1;
display: inline-block;
font-family: var(--bz-keyword-font, serif);
font-size: var(--bz-keyword-fontSize, 1rem);
}
.bz-autocomplete_input {
font-family: var(--bz-keyword-font, serif);
font-size: var(--bz-keyword-fontSize, 1rem);
}
```
### Autocomplete Box
```css
.bz-autocomplete_results {
position: absolute;
top: calc(100% - 1px);
left: 0;
width: max-content;
min-width: 160px;
max-width: 300px;
max-height: 400px;
margin: 0;
padding: 0;
overflow: auto;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 0 0 5px 5px;
box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1);
}
```
### Result (Text, Pointer, Alignment, Box Shadow)
```css
.bz-autocomplete_loading {
pointer-events: none;
}
.bz-autocomplete_result {
padding: 0.5rem 0.75rem;
text-align: left;
list-style: none;
cursor: pointer;
}
.bz-autocomplete_result + .bz-autocomplete_result {
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}
```
### Active Result (Hover)
```css
.bz-autocomplete_result.is-active,
.bz-autocomplete_result:hover {
background-color: #c5c5c5;
background-color: var(--bz-keyword-highlight, #c5c5c5);
}
.bz-autocomplete_result.is-active .bz-autocomplete_resultTitle,
.bz-autocomplete_result:hover .bz-autocomplete_resultTitle {
color: var(--bz-keyword-text, #000);
}
```
### Result Title
```css
.bz-autocomplete_resultTitle {
color: #000;
}
```
Keyword Search Results
Empty Search Message
```css
.bz-empty {
display: flex;
justify-content: center;
align-items: center;
max-width: var(--bz-keyword-max-width, 850px);
height: 50vh;
margin: auto;
color: #e4e4e4;
font-size: 4rem;
font-family: var(--bz-keyword-font, inherit);
}
```
### Results Box
```css
/* Empty div used as a positioning wrapper */
.bz-result {
width: 100%;
max-width: 850px;
max-width: var(--bz-keyword-max-width, 850px);
margin: 2rem auto;
font-size: var(--bz-keyword-fontSize, inherit);
font-family: var(--bz-keyword-font, inherit);
}
```
### Did You Mean Feature
i
```css
.bz-query_correction {
margin-bottom: 1rem;
font-weight: 700;
font-style: italic;
}
```
### Spell Corrections
```css
.bz-query_correctionLink {
cursor: pointer;
}
```
### Results Padding, Margin
```css
/* Empty elements used as semantic wrappers */
.bz-results_list {
margin: 0;
padding: 0;
list-style-type: none;
}
.bz-result_item + .bz-result_item {
margin-top: 1em;
}
.bz-results_link {
display: block;
margin-bottom: 0.5em;
padding: 1rem 0;
text-decoration: none;
word-break: break-word;
}
```
### Search Result Title
```css
.bz-results_title {
display: inline-block;
margin-bottom: 0.15rem;
color: var(--bz-keyword-color, #0551de);
font-size: 1.5em;
text-decoration: none;
}
.bz-results_title:hover {
text-decoration: underline;
}
.bz-results_link:visited .bz-results_title {
color: #5f1a86;
color: var(--bz-keyword-visited-color, #5f1a86);
}
```
### Category Tabs
```css
.bz-tags {
margin-bottom: 2rem;
flex-wrap: wrap;
}
.bz-tags,
.bz-tag {
display: flex;
align-items: center;
}
.bz-tag {
border: transparent 1px solid;
border-radius: var(--bz-keyword-border-radius, 2px);
padding: 0.25rem 0.5rem;
transition: border 0.25s ease-out;
}
.bz-tag.is-active {
border-color: var(--bz-keyword-text, #000);
}
.bz-tag:hover {
cursor: pointer;
border-color: var(--bz-keyword-text, #000);
}
```
### Result Type Icon
```css
.bz-tagIcon {
flex: 0 0 24px;
margin-right: 1rem;
margin-top: 0.25rem;
height: 24px;
color: var(--bz-keyword-icon, #6a6971);
}
.bz-tagIcon .custom-tag-icon {
height: 1.25rem;
width: 1.25rem;
}
```
### Taxonomy Filters
```css
.bz-taxonomy {
margin-bottom: 1rem;
}
.bz-taxonomy_list {
border-bottom: 1px solid #ddd;
margin: 0;
list-style-type: none;
padding: 0 0 1rem;
display: flex;
flex-wrap: wrap;
}
.bz-taxonomy_filters {
padding-top: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #ddd;
}
.bz-taxonomy_filtersList {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.25rem 0.5rem;
list-style-type: none;
margin: 0;
padding: 0;
}
.bz-taxonomy_filter {
background-color: var(--bz-keyword-color, #0551de);
color: var(--bz-keyword-button-text, #fff);
line-height: 24px;
border-radius: var(--bz-keyword-border-radius, 2px);
display: flex;
align-items: baseline;
padding-left: 0.5rem;
gap: 0.5rem;
}
```
### Breadcrumb
```css
.bz-results_breadcrumb {
color: var(--bz-keyword-url, var(--bz-keyword-text, #555));
opacity: 0.5;
font-style: italic;
padding-bottom: 2px;
}
```
### Search Result Description
```css
.bz-results_text {
display: -webkit-box;
max-height: 4.05em; /* number of lines to clamp * line-height in ems (3 * 1.35 * 1em) */
overflow: hidden;
color: var(--bz-keyword-text, #555);
line-height: 1.35;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
```
### Results Per Page
```css
.bz-results_size {
font-size: .9rem;
margin-left: auto;
}
.bz-results_sizeSelect {
padding: 4px;
}
```
### Custom Results
```css
.c-narrow {
display: flex;
align-items: center;
font-family: var(--bz-keyword-font, inherit);
font-size: var(--bz-keyword-fontSize, inherit);
font-size: clamp(10px, var(--bz-keyword-fontSize, inherit), 18px);
margin-bottom: 1rem;
}
.c-narrow_title {
font-weight: 600;
}
.c-narrow_pillWrapper {
position: relative;
}
.c-narrow_pill {
background-color: #f4f4f4;
border-radius: 2rem;
padding: 0.25rem 1rem 0.25rem 0.5rem;
display: flex;
align-items: center;
margin-left: 0.5rem;
cursor: pointer;
transition: background-color 0.3s ease-out;
&.is-active,
&:hover {
background-color: #ddd;
}
}
.c-narrow_pillBadge {
position: absolute;
align-items: center;
justify-content: center;
color: var(--bz-keyword-button-text, #fff);
background-color: var(
--bz-keyword-narrow-color,
var(--bz-keyword-color, #0551de)
);
border-radius: 1rem;
font-size: 0.825em;
height: 1rem;
top: -0.25rem;
left: calc(100% - 0.75rem);
padding: 0 4px;
}
.c-narrow_panel {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: calc(100% + 14px);
background-color: #fff;
cursor: default;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
display: none;
}
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.bigzeta.com/product-overview/search-engine-result-page-serp/advanced-css.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.