Animated Placeholder

Placeholder text cycles through example queries on a typewriter loop — pure CSS using steps() animation on a marquee track.

Pure CSS MIT licensed

Animated Placeholder the 15th 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-anim" role="search">
  <label class="csb-sr" for="csb-anim-i">Search</label>
  <span class="csb-anim-placeholder" aria-hidden="true">
    <span>Search "flexbox"...</span>
    <span>Search "modals"...</span>
    <span>Search "animations"...</span>
    <span>Search "flexbox"...</span>
  </span>
  <input id="csb-anim-i" type="search" name="q" />
</form>

.csb-anim { position: relative; display: inline-block; }
.csb-anim input {
  width: 240px; padding: 11px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none; position: relative; z-index: 1;
}
.csb-anim input:focus { border-color: #7c6cff; }
.csb-anim-placeholder {
  position: absolute;
  left: 14px; right: 14px; top: 0; bottom: 0;
  overflow: hidden; pointer-events: none;
  display: flex; align-items: center;
}
.csb-anim-placeholder span {
  flex-shrink: 0; width: 100%;
  font: 500 14px/1 system-ui, sans-serif; color: #b8b6d4;
  white-space: nowrap;
}
.csb-anim:not(:focus-within) .csb-anim-placeholder span:first-child {
  animation: csb-anim-cycle 9s steps(1) infinite;
}
.csb-anim input:not(:placeholder-shown) ~ .csb-anim-placeholder,
.csb-anim:focus-within .csb-anim-placeholder { display: none; }
@keyframes csb-anim-cycle {
  0%, 33%   { margin-left: 0; }
  33.5%, 66% { margin-left: -100%; }
  66.5%, 99% { margin-left: -200%; }
  100%       { margin-left: 0; }
}

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

@media (prefers-reduced-motion: reduce) {
  .csb-anim,
  .csb-anim * {
    animation: none !important;
  }
}

More from 32 CSS Search Box & Search Bar Designs

Caret Highlight Clear-on-Type Keyboard Hint Avatar Search Brutalist Stamp Compact Toolbar Hero Search Side Indicator Drop Shadow Float Search + Filter Dual Tone Outline Glitch Search

View the full collection →