Đế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

Danh sách chọn

Các dòng để chọn — cách giao, chi nhánh, gói — dòng đã chọn còn lại dấu tích.

Nhập liệu

Xem trước trực tiếp

Nguồn

<fieldset class="dc-pick">
  <legend class="dc-pick__legend">받는 방법</legend>
  <ul class="dc-pick__list">
    <li class="dc-pick__item">
      <input class="dc-pick__ctrl" type="radio" name="dc-pick-a" id="dc-pick-a1" checked />
      <label class="dc-pick__row" for="dc-pick-a1">
        <span class="dc-pick__text"><span class="dc-pick__title">택배로 받기</span><span class="dc-pick__sub">모레 도착 · 3,000원</span></span>
        <svg class="dc-pick__check" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 13 4 4 10-10" /></svg>
      </label>
    </li>
    <li class="dc-pick__item">
      <input class="dc-pick__ctrl" type="radio" name="dc-pick-a" id="dc-pick-a2" />
      <label class="dc-pick__row" for="dc-pick-a2">
        <span class="dc-pick__text"><span class="dc-pick__title">편의점에서 받기</span><span class="dc-pick__sub">내일 저녁부터 · 무료</span></span>
        <svg class="dc-pick__check" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 13 4 4 10-10" /></svg>
      </label>
    </li>
    <li class="dc-pick__item">
      <input class="dc-pick__ctrl" type="radio" name="dc-pick-a" id="dc-pick-a3" />
      <label class="dc-pick__row" for="dc-pick-a3">
        <span class="dc-pick__text"><span class="dc-pick__title">매장에서 찾기</span><span class="dc-pick__sub">오늘 6시 이후 · 무료</span></span>
        <svg class="dc-pick__check" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 13 4 4 10-10" /></svg>
      </label>
    </li>
  </ul>
</fieldset>
.dc-pick { min-width:0; margin:0; padding:var(--dc-4) 0; border:0; background:var(--dc-bg); font-family:var(--dc-font); }
.dc-pick__legend { padding:0 var(--dc-4); margin-bottom:var(--dc-2); font-size:15px; font-weight:600; color:var(--dc-text); }
.dc-pick__list { margin:0; padding:0; list-style:none; border-top:1px solid var(--dc-line); }
.dc-pick__item { position:relative; border-bottom:1px solid var(--dc-line); }
.dc-pick__ctrl { position:absolute; left:var(--dc-4); top:50%; width:1px; height:1px; margin:0; opacity:0; }
.dc-pick__row { display:flex; align-items:center; gap:var(--dc-3); min-height:64px; padding:var(--dc-3) var(--dc-4); background:var(--dc-surface); color:var(--dc-text); cursor:pointer; transition:background var(--dc-fast); }
.dc-pick__row:hover { background:var(--dc-sunken); }
.dc-pick__text { display:flex; flex:1; min-width:0; flex-direction:column; gap:2px; }
.dc-pick__title { font-size:15px; font-weight:600; }
.dc-pick__sub { font-size:13px; color:var(--dc-text-mute); }
.dc-pick__badge { flex:none; padding:2px var(--dc-2); border-radius:var(--dc-r-full); background:var(--dc-warn-soft); color:var(--dc-warn); font-size:11px; font-weight:700; }
.dc-pick__check { flex:none; width:24px; height:24px; fill:none; stroke:var(--dc-brand); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity var(--dc-fast); }
.dc-pick__box { flex:none; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border:2px solid var(--dc-line-field); border-radius:var(--dc-r-xs); color:transparent; }
.dc-pick__boxico { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.dc-pick__count { margin:0; padding:var(--dc-3) var(--dc-4) 0; font-size:13px; color:var(--dc-text-sub); }
.dc-pick__ctrl:checked + .dc-pick__row { background:var(--dc-brand-soft); }
.dc-pick__ctrl:checked + .dc-pick__row .dc-pick__title { color:var(--dc-brand-text); }
.dc-pick__ctrl:checked + .dc-pick__row .dc-pick__check { opacity:1; }
.dc-pick__ctrl:checked + .dc-pick__row .dc-pick__box { border-color:var(--dc-brand); background:var(--dc-brand); color:var(--dc-text-on); }
.dc-pick__ctrl:focus-visible + .dc-pick__row { outline:2px solid var(--dc-brand); outline-offset:-2px; }
.dc-pick__ctrl[disabled] + .dc-pick__row { background:var(--dc-sunken); cursor:not-allowed; }
.dc-pick__ctrl[disabled] + .dc-pick__row .dc-pick__title { color:var(--dc-text-mute); }

Cách dùng

  • Bọc cả dòng trong label để bấm chỗ nào trên dòng cũng chọn được, không chỉ cái vòng tròn
  • Chọn một thì dùng radio, chọn nhiều thì checkbox — đừng chỉ phân biệt bằng hình dạng
  • Dòng không chọn được thì ghi rõ lý do ngay trên dòng đó

Điểm cần lưu ý

  • Nếu ẩn ô gốc, phải để :focus-visible vẽ viền quanh dòng — người dùng bàn phím sẽ mất dấu
  • Giữ chiều cao dòng tối thiểu 56px

Tiếp theo