Bilah cari di bawah
Menaruh kolom cari tepat di jangkauan jempol, pada layar yang dipakai satu tangan.
Pratinjau langsung
Sumber
<div class="dc-sbstage">
<ul class="dc-sbstage__list">
<li class="dc-sbstage__row"><span class="dc-sbstage__t">용접 보조 · 평택</span><span class="dc-sbstage__m">일당 16만 · 오늘 출근</span></li>
<li class="dc-sbstage__row"><span class="dc-sbstage__t">물류 상하차 · 화성</span><span class="dc-sbstage__m">일당 13만 · 주 3일</span></li>
<li class="dc-sbstage__row"><span class="dc-sbstage__t">도장 기능공 · 안산</span><span class="dc-sbstage__m">일당 19만 · 경력 2년</span></li>
</ul>
<form class="dc-sb" action="#" role="search">
<div class="dc-sb__box">
<svg class="dc-sb__ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="M16.6 16.6 21 21" /></svg>
<label class="dc-sr" for="dc-sb-q">일자리 검색</label>
<input class="dc-sb__input" id="dc-sb-q" type="search" placeholder="지역·직종으로 찾기" enterkeyhint="search" />
</div>
<button class="dc-sb__mic" type="button"><svg class="dc-sb__micico" viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3" /><path d="M5 11a7 7 0 0 0 14 0M12 18v3" /></svg><span class="dc-sr">음성으로 검색</span></button>
</form>
</div>.dc-sbstage { position:relative; display:flex; flex-direction:column; min-height:410px; background:var(--dc-bg); font-family:var(--dc-font); overflow:hidden; }
.dc-sbstage__list { flex:1; margin:0; padding:0 0 calc(76px + var(--dc-safe-bottom)); list-style:none; overflow:auto; }
.dc-sbstage__row { display:flex; flex-direction:column; gap:2px; padding:var(--dc-3) var(--dc-4); border-bottom:1px solid var(--dc-line); background:var(--dc-surface); }
.dc-sbstage__t { font-size:15px; font-weight:600; color:var(--dc-text); }
.dc-sbstage__m { font-size:13px; color:var(--dc-text-mute); }
.dc-sbstage__sheet { position:absolute; left:0; right:0; bottom:calc(72px + var(--dc-safe-bottom)); padding:var(--dc-3) 0 var(--dc-2); border-top:1px solid var(--dc-line); background:var(--dc-surface); box-shadow:var(--dc-sh-2); }
.dc-sbstage__sheettitle { margin:0 var(--dc-4) var(--dc-1); font-size:12px; font-weight:700; color:var(--dc-text-mute); }
.dc-sbstage__recent { margin:0; padding:0; list-style:none; }
.dc-sbstage__rec { display:block; width:100%; min-height:44px; padding:0 var(--dc-4); border:0; background:transparent; color:var(--dc-text); font-family:var(--dc-font); font-size:15px; text-align:left; }
.dc-sbstage__rec:hover { background:var(--dc-sunken); }
.dc-sb { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:var(--dc-2); padding:var(--dc-3) var(--dc-4); padding-bottom:calc(var(--dc-3) + var(--dc-safe-bottom)); background:var(--dc-surface); border-top:1px solid var(--dc-line); box-shadow:var(--dc-sh-2); }
.dc-sb__box { flex:1; display:flex; align-items:center; gap:var(--dc-2); min-width:0; min-height:48px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-full); background:var(--dc-surface); }
.dc-sb__box:focus-within { border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-sb__ico { flex:none; width:20px; height:20px; fill:none; stroke:var(--dc-text-mute); stroke-width:2; stroke-linecap:round; }
.dc-sb__input { flex:1; min-width:0; min-height:46px; padding:0; border:0; background:transparent; color:var(--dc-text); font-family:var(--dc-font); font-size:16px; }
.dc-sb__input::placeholder { color:var(--dc-text-mute); }
.dc-sb__input:focus { outline:none; }
.dc-sb__x { flex:none; display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:calc(var(--dc-2) * -1); border:0; border-radius:var(--dc-r-full); background:transparent; color:var(--dc-text-sub); font-size:14px; }
.dc-sb__x:hover { background:var(--dc-sunken); }
.dc-sb__mic { flex:none; display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:0; border-radius:var(--dc-r-full); background:var(--dc-brand-soft); color:var(--dc-brand-text); }
.dc-sb__mic:hover { background:var(--dc-brand); color:var(--dc-text-on); }
.dc-sb__micico { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.dc-sb__send { flex:none; min-width:56px; min-height:48px; padding:0 var(--dc-3); border:0; border-radius:var(--dc-r-full); background:var(--dc-brand); color:var(--dc-text-on); font-family:var(--dc-font); font-size:15px; font-weight:600; }
.dc-sb__send:hover { background:var(--dc-brand-hi); }Cara memakainya
- Tempelkan bilah di bawah dan beri ruang di ujung daftar sebesar tinggi bilah
- Begitu disentuh, tampilkan pencarian terakhir — jangan panel kosong
- Tombol hapus hanya muncul selama ada isi
Hal yang perlu diwaspadai
- Tambahkan --dc-safe-bottom ke padding bawah, kalau tidak indikator home memakan bilah
- Tombol kaca pembesar dan mikrofon perlu nama tersembunyi