Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Bảng lọc

Gom các điều kiện thu hẹp danh sách vào một chỗ và luôn cho thấy điều kiện nào đang áp dụng.

Mẫu biểu mẫu

Xem trước trực tiếp

Nguồn

<aside class="dc-filter" aria-labelledby="dc-fl-head">
  <div class="dc-filter__head">
    <h2 class="dc-filter__title" id="dc-fl-head">조건으로 좁히기</h2>
    <button class="dc-filter__reset" type="button">초기화</button>
  </div>

  <details class="dc-filter__group" open>
    <summary class="dc-filter__group-head">지역</summary>
    <fieldset class="dc-filter__set">
      <legend class="dc-sr">지역</legend>
      <ul class="dc-filter__list">
        <li><label class="dc-filter__check"><input class="dc-filter__checkbox" type="checkbox" checked><span class="dc-filter__check-text">경기 남부</span><span class="dc-filter__count">128</span></label></li>
        <li><label class="dc-filter__check"><input class="dc-filter__checkbox" type="checkbox"><span class="dc-filter__check-text">충청</span><span class="dc-filter__count">86</span></label></li>
        <li><label class="dc-filter__check"><input class="dc-filter__checkbox" type="checkbox"><span class="dc-filter__check-text">경남</span><span class="dc-filter__count">54</span></label></li>
      </ul>
    </fieldset>
  </details>

  <details class="dc-filter__group">
    <summary class="dc-filter__group-head">고용 형태</summary>
    <fieldset class="dc-filter__set">
      <legend class="dc-sr">고용 형태</legend>
      <ul class="dc-filter__list">
        <li><label class="dc-filter__check"><input class="dc-filter__radio" type="radio" name="dc-fl-type" checked><span class="dc-filter__check-text">전체</span></label></li>
        <li><label class="dc-filter__check"><input class="dc-filter__radio" type="radio" name="dc-fl-type"><span class="dc-filter__check-text">정규직</span></label></li>
        <li><label class="dc-filter__check"><input class="dc-filter__radio" type="radio" name="dc-fl-type"><span class="dc-filter__check-text">계약직</span></label></li>
      </ul>
    </fieldset>
  </details>

  <div class="dc-filter__group">
    <h3 class="dc-filter__group-head">월급 (만원)</h3>
    <div class="dc-filter__range">
      <label class="dc-sr" for="dc-fl-min">최소 월급</label>
      <input class="dc-filter__range-input" id="dc-fl-min" type="number" inputmode="numeric" min="0" placeholder="200">
      <span class="dc-filter__dash" aria-hidden="true">~</span>
      <label class="dc-sr" for="dc-fl-max">최대 월급</label>
      <input class="dc-filter__range-input" id="dc-fl-max" type="number" inputmode="numeric" min="0" placeholder="400">
    </div>
  </div>

  <button class="dc-filter__apply" type="button">128건 보기</button>
</aside>
.dc-filter { display:flex; flex-direction:column; gap:var(--dc-3); width:100%; max-width:300px; padding:var(--dc-4); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); font-family:var(--dc-font); }
.dc-filter__head { display:flex; align-items:center; justify-content:space-between; gap:var(--dc-2); }
.dc-filter__title { font-size:15px; font-weight:700; color:var(--dc-text); }
.dc-filter__reset { min-height:36px; padding:0 var(--dc-2); border:0; background:none; color:var(--dc-text-sub); font-size:12px; text-decoration:underline; text-underline-offset:.15em; cursor:pointer; }
.dc-filter__reset:hover { color:var(--dc-text); }
.dc-filter__group { padding-top:var(--dc-2); border-top:1px solid var(--dc-line); }
.dc-filter__group-head { display:flex; align-items:center; justify-content:space-between; gap:var(--dc-2); min-height:44px; font-size:13px; font-weight:700; color:var(--dc-text); }
summary.dc-filter__group-head { list-style:none; cursor:pointer; }
summary.dc-filter__group-head::-webkit-details-marker { display:none; }
summary.dc-filter__group-head::after { content:""; flex:0 0 auto; width:7px; height:7px; margin-right:var(--dc-1); border-right:2px solid var(--dc-text-sub); border-bottom:2px solid var(--dc-text-sub); transform:rotate(45deg); transition:transform var(--dc-fast); }
.dc-filter__group[open] > summary.dc-filter__group-head::after { transform:rotate(-135deg); }
.dc-filter__set { min-width:0; margin:0; padding:0; border:0; }
.dc-filter__list { display:flex; flex-direction:column; padding-bottom:var(--dc-2); }
.dc-filter__check { display:flex; align-items:center; gap:var(--dc-2); min-height:44px; cursor:pointer; }
.dc-filter__checkbox, .dc-filter__radio { flex:0 0 auto; width:20px; height:20px; accent-color:var(--dc-brand); }
.dc-filter__check-text { flex:1 1 auto; font-size:13px; color:var(--dc-text-sub); }
.dc-filter__check:hover .dc-filter__check-text { color:var(--dc-text); }
.dc-filter__count { flex:0 0 auto; font-size:12px; color:var(--dc-text-mute); font-variant-numeric:tabular-nums; }
.dc-filter__range { display:flex; align-items:center; gap:var(--dc-2); padding-bottom:var(--dc-3); }
.dc-filter__range-input { width:100%; min-width:0; min-height:44px; padding:0 var(--dc-2); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:14px; }
.dc-filter__range-input:focus { border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-filter__dash { flex:0 0 auto; color:var(--dc-text-mute); }
.dc-filter__chips { display:flex; flex-wrap:wrap; gap:var(--dc-2); }
.dc-filter__chip { display:inline-flex; align-items:center; gap:var(--dc-1); padding:var(--dc-1) var(--dc-1) var(--dc-1) var(--dc-3); border:1px solid var(--dc-brand); border-radius:var(--dc-r-full); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-size:12px; font-weight:600; }
.dc-filter__chip-x { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:0; border-radius:var(--dc-r-full); background:none; color:var(--dc-brand-text); font-size:15px; line-height:1; cursor:pointer; }
.dc-filter__chip-x:hover { background:var(--dc-surface); }
.dc-filter__result { font-size:13px; color:var(--dc-text-sub); }
.dc-filter__select { min-height:44px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:14px; }
.dc-filter__apply { min-height:48px; border:1px solid transparent; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:14px; font-weight:700; cursor:pointer; }
.dc-filter__apply:hover { background:var(--dc-brand-hi); }
.dc-filter--inline { max-width:none; flex-direction:row; align-items:center; flex-wrap:wrap; gap:var(--dc-2); }
@media (max-width:560px) {
  .dc-filter { max-width:none; }
}

Cách dùng

  • Hiện điều kiện đang áp dụng thành các chip phía trên và cho bỏ từng chip
  • Ghi số kết quả bên cạnh từng lựa chọn để không ai chọn tổ hợp ra con số không
  • Thu gọn từng nhóm bằng details và summary — mở đóng được mà không cần script
  • Để nút đặt lại ở đầu bảng và đừng làm nó trông như nút chính

Điểm cần lưu ý

  • Hoặc danh sách đổi ngay khi tích, hoặc chờ nút áp dụng — chỉ chọn một kiểu
  • Cho cả nhãn thành vùng bấm; riêng ô vuông nhỏ thì ngón tay khó trúng

Tiếp theo