Minimal Underline

Borderless input with a thin bottom rule that animates outward from the centre on focus — the cleanest pattern that still signals interactivity.

Pure CSS MIT licensed

Minimal Underline the 1st 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-min" role="search">
  <label class="csb-sr" for="csb-min-i">Search</label>
  <input id="csb-min-i" type="search" name="q" placeholder="Search anything..." />
</form>

.csb-min { position: relative; display: inline-block; }
.csb-min input {
  width: 240px; padding: 8px 0;
  border: 0; outline: none;
  background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  border-bottom: 1px solid #2a2a3e;
}
.csb-min input::placeholder { color: #b8b6d4; }
.csb-min::after {
  content: ''; position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 2px;
  background: #7c6cff;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}
.csb-min:focus-within::after { width: 100%; }

.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

Pill with Submit Glass Search Neon Outline Floating Label Caret Highlight Clear-on-Type Keyboard Hint Animated Placeholder Avatar Search Brutalist Stamp Compact Toolbar Hero Search

View the full collection →