Robert Birming

Bear Blog search filter

These styles make Herman's official blog search plugin feel like a natural part of your blog rather than a default input dropped onto the page.1

It filters your post list in real time as you type, matching against post titles. The placeholder text is set in the script itself, so change it there if you'd like something other than "Search...".

Preview

Blog search filter styled to match the theme

How to use

Add the plugin script to your footer (Dashboard → Settings → Header and footer directives), or embed it on a page, then add the styles below to your theme.

Styles

body.blog #searchInput {
  display: block;
  width: min(16rem, 100%);
  box-sizing: border-box;
  margin-block: 1.5rem;
  padding-block: 0.5em;
  padding-inline: 0.8em;
  font: inherit;
  color: var(--text-color);
  background-color: var(--code-background-color);
  border: 1px solid color-mix(in srgb, var(--text-color), transparent 78%);
  border-radius: 4px;
}

body.blog #searchInput::placeholder {
  color: color-mix(in srgb, var(--text-color), transparent 45%);
}

body.blog #searchInput:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

Want more? Check out the full Bear Blog library.

  1. Requires JavaScript, available on Bear Blog's premium plan.↩