28 CSS Input Fields
08 / 28

All 28 in 28 CSS Input Fields

  1. 01Floating Label
  2. 02Underline Sweep
  3. 03Neon Glow
  4. 04Glass Frosted
  5. 05Notched Outline
  6. 06Liquid Border
  7. 07Inline Validation
  8. 08Search with Clear
  9. 09Password Strength
  10. 10OTP Code
  11. 11Rotating Placeholder
  12. 12Tag Input
  13. 13Phone with Country
  14. 14Stepper Number
  15. 15File Drop Zone
  16. 16Currency Input
  17. 17Date Picker Native
  18. 18Time Range
  19. 19Color Picker
  20. 20Search with Voice
  21. 21Email with Suggestions
  22. 22Auto-Grow Textarea
  23. 23Inline Edit
  24. 24Range Slider Pro
  25. 25URL with Protocol
  26. 26Credit Card
  27. 27Toggle Password
  28. 28Brutalist Input
Pure CSSMIT licensed

Search with Clear

Search input with a leading magnifier icon and a trailing clear button. The clear control appears only when the field has content — handled with `:placeholder-shown`.

Live Demo
Plain CSSTailwind v4
Try it

Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS

ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<form class="if-08" role="search">
  <span class="if-08-icon" aria-hidden="true">
    <svg viewBox="0 0 16 16" width="14" height="14">
      <path
        fill="none"
        stroke="currentColor"
        stroke-width="1.6"
        stroke-linecap="round"
        d="M11 11l3 3M7 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"
      />
    </svg>
  </span>
  <input type="search" name="q" placeholder="Search projects, people, files…" aria-label="Search" />
  <button type="reset" class="if-08-clear" aria-label="Clear search">
    <svg viewBox="0 0 12 12" width="10" height="10" aria-hidden="true">
      <path
        fill="none"
        stroke="currentColor"
        stroke-width="1.6"
        stroke-linecap="round"
        d="M2 2l8 8M10 2l-8 8"
      />
    </svg>
  </button>
</form>
.if-08 {
  position: relative;
  width: 100%;
  max-width: 280px;
  display: flex;
  align-items: center;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0 8px 0 36px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.if-08:focus-within {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}

.if-08-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #b8b6d4;
  display: grid;
  place-items: center;
}

.if-08:focus-within .if-08-icon {
  color: #60a5fa;
}

.if-08 input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  padding: 11px 0;
}

.if-08 input::placeholder {
  color: #b8b6d4;
}

.if-08 input::-webkit-search-cancel-button {
  display: none;
}

.if-08-clear {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  border-radius: 50%;
  color: #b8b6d4;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.if-08:has(input:placeholder-shown) .if-08-clear,
.if-08:has(input[value=""]) .if-08-clear {
  opacity: 0;
  pointer-events: none;
}

.if-08-clear:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f0eeff;
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Input Field from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Search with Clear
Source: https://codefronts.com/components/css-input-fields/search-with-clear/

Search input with a leading magnifier icon and a trailing clear button. The clear control appears only when the field has content — handled with `:placeholder-shown`.
## HTML
```html
<form class="if-08" role="search">
  <span class="if-08-icon" aria-hidden="true">
    <svg viewBox="0 0 16 16" width="14" height="14">
      <path
        fill="none"
        stroke="currentColor"
        stroke-width="1.6"
        stroke-linecap="round"
        d="M11 11l3 3M7 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"
      />
    </svg>
  </span>
  <input type="search" name="q" placeholder="Search projects, people, files…" aria-label="Search" />
  <button type="reset" class="if-08-clear" aria-label="Clear search">
    <svg viewBox="0 0 12 12" width="10" height="10" aria-hidden="true">
      <path
        fill="none"
        stroke="currentColor"
        stroke-width="1.6"
        stroke-linecap="round"
        d="M2 2l8 8M10 2l-8 8"
      />
    </svg>
  </button>
</form>
```
## CSS
```css
.if-08 {
  position: relative;
  width: 100%;
  max-width: 280px;
  display: flex;
  align-items: center;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0 8px 0 36px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.if-08:focus-within {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}

.if-08-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #b8b6d4;
  display: grid;
  place-items: center;
}

.if-08:focus-within .if-08-icon {
  color: #60a5fa;
}

.if-08 input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  padding: 11px 0;
}

.if-08 input::placeholder {
  color: #b8b6d4;
}

.if-08 input::-webkit-search-cancel-button {
  display: none;
}

.if-08-clear {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  border-radius: 50%;
  color: #b8b6d4;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.if-08:has(input:placeholder-shown) .if-08-clear,
.if-08:has(input[value=""]) .if-08-clear {
  opacity: 0;
  pointer-events: none;
}

.if-08-clear:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f0eeff;
}
```

How this works

The clear button is always in the DOM. .if-08:has(input:placeholder-shown) matches whenever the field is empty, and that rule zeroes opacity and disables pointer-events. As soon as the user types a character, :placeholder-shown stops matching and the X fades in.

The native type="reset" on the button clears the field for free — no click handler needed. That plus the ::-webkit-search-cancel-button reset gives you a CSS-only search clear button that submits, resets, and keyboard-focuses like a proper form control.

Make it yours

  • Swap the leading and trailing SVG icons inline — both are currentColor stroked so they inherit the field text colour.
  • Change the pill by tuning border-radius: 999px and the surrounding padding on the wrapper.
  • Retint the focus halo via the #60a5fa accent and its rgba(96, 165, 250, 0.18) box-shadow.
  • Adjust reveal speed with the opacity 0.15s transition on the clear button.

Gotchas — read before shipping

  • The placeholder attribute must be non-empty for :placeholder-shown to work; an empty string collapses the whole toggle.
  • type="reset" resets the entire enclosing form, not just this input — wrap the field in its own form element or switch to a click handler if there are other fields.
  • Firefox doesn't expose ::-webkit-search-cancel-button, but that's fine because the native X only appears in WebKit browsers anyway.

Browser support

ChromeSafariFirefoxEdge
105+15.4+121+105+

:has() is the constraint; without it the clear button stays visible but still functions.

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →