Side Indicator

A 3px coloured rail on the left edge of the input shifts colour on focus — minimal but unmistakable signal.

Pure CSS MIT licensed

Side Indicator the 20th of 32 designs in the 32 CSS Search Box & Search Bar Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.

Live preview

Open in playground

The code

<form class="csb-side" role="search">
  <label class="csb-sr" for="csb-side-i">Search</label>
  <input id="csb-side-i" type="search" name="q" placeholder="Search..." />
</form>

.csb-side {
  position: relative; display: inline-block;
}
.csb-side input {
  width: 240px; padding: 11px 14px 11px 18px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0 8px 8px 0;
  border-left: 3px solid #2a2a3e;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none;
  transition: border-left-color 0.25s;
}
.csb-side input::placeholder { color: #b8b6d4; }
.csb-side input:focus { border-left-color: #2ecc8a; }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

More from 32 CSS Search Box & Search Bar Designs

Avatar Search Brutalist Stamp Compact Toolbar Hero Search Drop Shadow Float Search + Filter Dual Tone Outline Glitch Search Compact Mobile Focus Ring Bloom Inset Pressed Border Trace

View the full collection →