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`.

Published May 4, 2026

Live Demo

Try it

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>

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

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

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

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

Chrome	Safari	Firefox	Edge
105+	15.4+	121+	105+

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