Advanced CSS

Your development team can take full control of the look and feel of the Keyword Search interface.

Here is the full breakdown of the HTML and CSS that the Keyword Search snippet injects into your site.

Search Box 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

.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)

.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)

.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

.bz-autocomplete_resultTitle {
  color: #000;
}

Keyword Search Results

Empty Search Message

.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

/* 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

.bz-query_correction {
  margin-bottom: 1rem;

  font-weight: 700;
  font-style: italic;
}

Spell Corrections

.bz-query_correctionLink {
  cursor: pointer;
}

Results Padding, Margin

/* 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

.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

.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

.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

.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

.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

.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

.bz-results_size {
  font-size: .9rem;
  margin-left: auto;
}

.bz-results_sizeSelect {
  padding: 4px;
}

Custom Results

.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;
}