ផ្ទាំងច្រោះ
ប្រមូលលក្ខខណ្ឌបង្រួមបញ្ជីមកទីតាំងតែមួយ ហើយបង្ហាញជានិច្ចថាលក្ខខណ្ឌណាកំពុងដំណើរការ។
មើលជាមុនផ្ទាល់
ប្រភព
<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; }
}របៀបប្រើ
- បង្ហាញលក្ខខណ្ឌកំពុងប្រើជាឈីបនៅខាងលើ ហើយអនុញ្ញាតដោះចេញមួយៗ
- ដាក់លេខចំនួនលទ្ធផលក្បែរជម្រើសនីមួយៗ ដើម្បីកុំឲ្យជ្រើសរួចបានសូន្យ
- បត់ក្រុមដោយ details និង summary — បើកបិទបានដោយគ្មានស្គ្រីប
- ដាក់ប៊ូតុងកំណត់ឡើងវិញនៅក្បាលផ្ទាំង កុំធ្វើឲ្យដូចប៊ូតុងចម្បង
ចំណុចត្រូវប្រុងប្រយ័ត្ន
- ឬបញ្ជីប្ដូរភ្លាមពេលជ្រើស ឬរង់ចាំប៊ូតុងអនុវត្ត — ជ្រើសតែមួយបៀប
- ធ្វើឲ្យ label ទាំងមូលជាតំបន់ចុច; ប្រអប់តូចតែមួយ ម្រាមដៃចុចពិបាក