Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Search field

For lists long enough that searching beats scanning — and the placeholder says what can be searched.

Inputs

Live preview

Source

<form class="dc-srch" role="search" action="#">
  <label class="dc-sr" for="dc-srch-q">상품 검색</label>
  <span class="dc-srch__field">
    <span class="dc-srch__icon" aria-hidden="true"><svg viewBox="0 0 20 20" width="18" height="18" focusable="false"><circle cx="9" cy="9" r="6" fill="none" stroke="currentColor" stroke-width="2" /><path d="M13.5 13.5 18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg></span>
    <input class="dc-srch__input" id="dc-srch-q" type="search" name="q" placeholder="상품명, 주문번호로 검색" autocomplete="off">
  </span>
  <button class="dc-srch__submit" type="submit">검색</button>
</form>
.dc-srch {
  position: relative; display: flex; align-items: center; gap: var(--dc-2);
  max-width: 460px; font-family: var(--dc-font);
}
.dc-srch__field {
  position: relative; display: flex; align-items: center; flex: 1 1 auto;
  min-width: 0; min-height: 44px;
  border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-full);
  background: var(--dc-surface);
  transition: border-color var(--dc-fast), box-shadow var(--dc-fast);
}
.dc-srch__field:hover { border-color: var(--dc-line-bold); }
.dc-srch__field:focus-within {
  border-color: var(--dc-brand); box-shadow: 0 0 0 3px var(--dc-brand-soft);
}
.dc-srch__icon {
  flex: none; display: inline-flex; padding-left: var(--dc-3);
  color: var(--dc-text-sub);
}
.dc-srch__input {
  appearance: none; -webkit-appearance: none;
  flex: 1 1 auto; min-width: 0;
  min-height: 42px; padding: 0 var(--dc-2);
  border: 0; background: none; color: var(--dc-text);
  font-family: inherit; font-size: 15px; line-height: 1.4;
}
.dc-srch__input::placeholder { color: var(--dc-text-mute); }
.dc-srch__input:focus { outline: none; }
.dc-srch__input::-webkit-search-cancel-button { display: none; }
.dc-srch__clear {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--dc-r-full);
  background: none; color: var(--dc-text-sub);
  transition: color var(--dc-fast), background var(--dc-fast);
}
.dc-srch__clear:hover { color: var(--dc-text); background: var(--dc-sunken); }
.dc-srch__submit {
  flex: none; min-height: 44px; padding: 0 var(--dc-5);
  border: 1px solid transparent; border-radius: var(--dc-r-full);
  background: var(--dc-brand); color: var(--dc-text-on);
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1;
  white-space: nowrap;
}
.dc-srch__submit:hover { background: var(--dc-brand-hi); }
.dc-srch__list {
  position: absolute; top: calc(100% + var(--dc-2)); left: 0; right: 0; z-index: 2;
  margin: 0; padding: var(--dc-1); list-style: none;
  border: 1px solid var(--dc-line); border-radius: var(--dc-r-md);
  background: var(--dc-surface); box-shadow: var(--dc-sh-2);
}
.dc-srch__opt {
  display: flex; align-items: center; gap: var(--dc-2);
  min-height: 40px; padding: 0 var(--dc-3); border-radius: var(--dc-r-sm);
  font-size: 14px; color: var(--dc-text); cursor: pointer;
}
.dc-srch__opt:hover,
.dc-srch__opt[aria-selected="true"] { background: var(--dc-brand-soft); color: var(--dc-brand-text); }
.dc-srch__hint { margin-left: auto; font-size: 13px; color: var(--dc-text-sub); }
.dc-srch--compact .dc-srch__field { min-height: 36px; }
.dc-srch--compact .dc-srch__input { min-height: 34px; font-size: 14px; }

How to use it

  • Put the searchable fields in the placeholder: "Search by product name or order number"
  • Show a clear button as soon as there is text — do not make phone users hold backspace
  • Drop the submit button when results filter live; keep it when the search loads a new page

Watch out for

  • Without role="search" and a label, a screen reader just finds an unnamed text box
  • A suggestion list needs aria-expanded and arrow-key navigation built at the same time

Next