Open demo

CSS code

HTML 
<div><span class="lbl">Glow on focus</span>
<form class="dk dk-glow" role="search" aria-label="Music">
  <label class="sr-only" for="dk-music">Search music</label>
  <div class="dk-field">
    <svg class="dk-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="dk-input" id="dk-music" type="search" name="q" placeholder="Artists or albums">
    <button class="dk-go" type="submit">Search</button>
  </div>
</form></div>

<div><span class="lbl">Query bar with a time range</span>
<form class="dk" role="search" aria-label="Logs">
  <label class="sr-only" for="dk-logs">Log query</label>
  <label class="sr-only" for="dk-when">Time range</label>
  <div class="dk-qbar">
    <span class="dk-prompt" aria-hidden="true">›</span>
    <input class="dk-input" id="dk-logs" type="search" name="q" value="status:500 path:/checkout" spellcheck="false" autocomplete="off" aria-describedby="dk-logs-meta">
    <select class="dk-range" id="dk-when" name="range"><option>15 min</option><option>1 hour</option><option selected>24 hours</option><option>7 days</option></select>
    <button class="dk-run" type="submit">Run <kbd aria-hidden="true">↵</kbd></button>
  </div>
  <p class="dk-meta" id="dk-logs-meta"><b>1,284</b> matching lines from 3 services</p>
</form></div>

<div><span class="lbl">Field with recent searches</span>
<div class="dk dk-panel">
  <form role="search" aria-label="Notes">
    <label class="sr-only" for="dk-notes">Search notes</label>
    <div class="dk-field">
      <svg class="dk-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
      <input class="dk-input" id="dk-notes" type="search" name="q" placeholder="Search 312 notes">
    </div>
  </form>
  <div class="dk-recent">
    <p class="dk-recent-h" id="dk-recent-h">Recent</p>
    <ul aria-labelledby="dk-recent-h">
      <li><a href="?q=q4+roadmap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span>Q4 roadmap</span><small>2 hours ago</small></a></li>
      <li><a href="?q=onboarding+checklist"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span>onboarding checklist</span><small>Yesterday</small></a></li>
      <li><a href="?q=vendor+invoices+march"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span>vendor invoices march</span><small>Mon</small></a></li>
    </ul>
  </div>
</div></div>
CSS 
/* Dark search bars. On a dark ground a light-theme field turns into a grey smudge, so borders are lifted to 3:1,
   text to at least 4.5:1, and focus is a bright accent ring. color-scheme:dark keeps native pop-ups dark too. */
.dk{--dk-bg:#0b0f17;--dk-surface:#111827;--dk-raise:#161e2e;--dk-text:#e5e7eb;--dk-muted:#9ca3af;--dk-line:#6b7588;
  --dk-accent:#22d3ee;--dk-accent-ink:#0b0f17;--dk-glow:rgba(34,211,238,.35);color-scheme:dark;max-width:620px;color:var(--dk-text)}
.dk *{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dk-field{position:relative;display:flex;align-items:center}
.dk-ico{position:absolute;left:18px;top:50%;width:19px;height:19px;margin-top:-9.5px;color:var(--dk-muted);pointer-events:none;transition:color .2s}
.dk-input{width:100%;min-width:0;height:52px;margin:0;padding:0 18px 0 48px;font:inherit;font-size:1rem;color:var(--dk-text);background:var(--dk-surface);
  border:1px solid var(--dk-line);border-radius:999px;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.dk-input::placeholder{color:var(--dk-muted);opacity:1}
.dk-input:focus{outline:none;border-color:var(--dk-accent);box-shadow:0 0 0 1px var(--dk-accent),0 0 28px -2px var(--dk-glow)}
.dk-field:focus-within .dk-ico{color:var(--dk-accent)}
.dk button:focus-visible,.dk a:focus-visible,.dk select:focus-visible{outline:2px solid var(--dk-accent);outline-offset:2px}
/* A: glow — pill with an accent button inside */
.dk-glow .dk-input{padding-right:112px}
.dk-go{position:absolute;right:6px;top:6px;height:40px;margin:0;padding:0 20px;border:0;border-radius:999px;background:var(--dk-accent);color:var(--dk-accent-ink);
  font:inherit;font-size:.92rem;font-weight:700;cursor:pointer;transition:background-color .15s}
.dk-go:hover{background:#67e8f9}
/* B: query bar — monospace, a time-range select and a run button */
.dk-qbar{display:flex;align-items:center;gap:6px;padding:5px;background:var(--dk-surface);border:1px solid var(--dk-line);border-radius:12px;transition:border-color .2s,box-shadow .2s}
.dk-qbar:focus-within{border-color:var(--dk-accent);box-shadow:0 0 0 1px var(--dk-accent),0 0 28px -2px var(--dk-glow)}
.dk-prompt{flex:none;width:26px;text-align:center;color:var(--dk-accent);font:700 1.1rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.dk-qbar .dk-input{flex:1;height:40px;padding:0 4px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;background:transparent;border:0;border-radius:6px;box-shadow:none}
.dk-range{flex:none;height:36px;margin:0;padding:0 28px 0 10px;font:inherit;font-size:.82rem;font-weight:600;color:var(--dk-text);cursor:pointer;
  background:var(--dk-raise) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center/12px;
  border:1px solid var(--dk-line);border-radius:8px;-webkit-appearance:none;appearance:none}
.dk-run{display:inline-flex;align-items:center;gap:8px;flex:none;height:36px;margin:0;padding:0 12px 0 14px;border:0;border-radius:8px;background:var(--dk-accent);color:var(--dk-accent-ink);
  font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;transition:background-color .15s}
.dk-run:hover{background:#67e8f9}
.dk-run kbd{font:600 .75rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:3px 5px;border-radius:4px;background:rgba(11,15,23,.18)}
.dk-meta{margin:10px 2px 0;font-size:.82rem;color:var(--dk-muted)}
.dk-meta b{color:var(--dk-text);font-weight:600}
/* C: field with recent searches underneath */
.dk-panel{padding:8px;background:var(--dk-raise);border:1px solid #2a3446;border-radius:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.dk-panel .dk-input{border-radius:12px}
.dk-recent{padding:14px 6px 4px}
.dk-recent-h{margin:0 10px 6px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dk-muted)}
.dk-recent ul{margin:0;padding:0;list-style:none}
.dk-recent a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px;color:var(--dk-text);font-size:.93rem;text-decoration:none;transition:background-color .15s}
.dk-recent a:hover{background:#1f2937}
.dk-recent a svg{flex:none;width:17px;height:17px;color:var(--dk-muted)}
.dk-recent a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-recent small{flex:none;color:var(--dk-muted);font-size:.78rem}
@media (max-width:520px){.dk-run kbd{display:none}.dk-range{padding-right:24px}}
@media (prefers-reduced-motion:reduce){.dk-ico,.dk-input,.dk-go,.dk-qbar,.dk-run,.dk-recent a{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Glow on focus</span>
<form class="dk dk-glow" role="search" aria-label="Music" data-bs-theme="dark">
  <label class="visually-hidden" for="dk-music">Search music</label>
  <div class="dk-field position-relative">
    <svg class="dk-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="form-control rounded-pill" id="dk-music" type="search" name="q" placeholder="Artists or albums">
    <button class="btn rounded-pill" type="submit">Search</button>
  </div>
</form></div>

<div><span class="lbl">Query bar with a time range</span>
<form class="dk" role="search" aria-label="Logs" data-bs-theme="dark">
  <label class="visually-hidden" for="dk-logs">Log query</label>
  <label class="visually-hidden" for="dk-when">Time range</label>
  <div class="dk-qbar">
    <span class="dk-prompt" aria-hidden="true">›</span>
    <input class="form-control" id="dk-logs" type="search" name="q" value="status:500 path:/checkout" spellcheck="false" autocomplete="off" aria-describedby="dk-logs-meta">
    <select class="form-select" id="dk-when" name="range"><option>15 min</option><option>1 hour</option><option selected>24 hours</option><option>7 days</option></select>
    <button class="btn" type="submit">Run <kbd aria-hidden="true">↵</kbd></button>
  </div>
  <p class="dk-meta" id="dk-logs-meta"><b>1,284</b> matching lines from 3 services</p>
</form></div>

<div><span class="lbl">Field with recent searches</span>
<div class="dk dk-panel" data-bs-theme="dark">
  <form role="search" aria-label="Notes">
    <label class="visually-hidden" for="dk-notes">Search notes</label>
    <div class="dk-field position-relative">
      <svg class="dk-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
      <input class="form-control" id="dk-notes" type="search" name="q" placeholder="Search 312 notes">
    </div>
  </form>
  <div class="dk-recent">
    <p class="dk-recent-h" id="dk-recent-h">Recent</p>
    <ul class="list-group list-unstyled" aria-labelledby="dk-recent-h">
      <li><a class="list-group-item list-group-item-action" href="?q=q4+roadmap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span>Q4 roadmap</span><small>2 hours ago</small></a></li>
      <li><a class="list-group-item list-group-item-action" href="?q=onboarding+checklist"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span>onboarding checklist</span><small>Yesterday</small></a></li>
      <li><a class="list-group-item list-group-item-action" href="?q=vendor+invoices+march"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span>vendor invoices march</span><small>Mon</small></a></li>
    </ul>
  </div>
</div></div>
CSS 
/* Bootstrap's dark colour mode (data-bs-theme="dark") with .form-control, .form-select, .btn and .list-group,
   retuned through --dk-* and Bootstrap variables so borders reach 3:1 and focus is a bright accent ring. */
.dk{--dk-bg:#0b0f17;--dk-surface:#111827;--dk-raise:#161e2e;--dk-text:#e5e7eb;--dk-muted:#9ca3af;--dk-line:#6b7588;
  --dk-accent:#22d3ee;--dk-accent-ink:#0b0f17;--dk-glow:rgba(34,211,238,.35);
  --bs-body-color:var(--dk-text);--bs-body-bg:var(--dk-surface);--bs-border-color:var(--dk-line);--bs-secondary-color:var(--dk-muted);
  max-width:620px;color:var(--dk-text)}
.dk-ico{position:absolute;left:18px;top:50%;z-index:1;width:19px;height:19px;margin-top:-9.5px;color:var(--dk-muted);pointer-events:none;transition:color .2s}
.dk .form-control{height:52px;padding:0 18px 0 48px;font-size:1rem;color:var(--dk-text);background:var(--dk-surface);border-color:var(--dk-line);
  -webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.dk .form-control::placeholder{color:var(--dk-muted);opacity:1}
.dk .form-control:focus{background:var(--dk-surface);border-color:var(--dk-accent);box-shadow:0 0 0 1px var(--dk-accent),0 0 28px -2px var(--dk-glow)}
.dk-field:focus-within .dk-ico{color:var(--dk-accent)}
.dk .btn{--bs-btn-border-width:0;--bs-btn-font-weight:700;--bs-btn-bg:var(--dk-accent);--bs-btn-color:var(--dk-accent-ink);--bs-btn-hover-bg:#67e8f9;
  --bs-btn-hover-color:var(--dk-accent-ink);--bs-btn-active-bg:#67e8f9;--bs-btn-active-color:var(--dk-accent-ink)}
.dk .btn:focus-visible,.dk a:focus-visible,.dk .form-select:focus-visible{outline:2px solid var(--dk-accent);outline-offset:2px;box-shadow:none}
/* A: glow */
.dk-glow .form-control{padding-right:112px}
.dk-glow .btn{--bs-btn-padding-x:20px;--bs-btn-font-size:.92rem;position:absolute;right:6px;top:6px;height:40px}
/* B: query bar */
.dk-qbar{display:flex;align-items:center;gap:6px;padding:5px;background:var(--dk-surface);border:1px solid var(--dk-line);border-radius:12px;transition:border-color .2s,box-shadow .2s}
.dk-qbar:focus-within{border-color:var(--dk-accent);box-shadow:0 0 0 1px var(--dk-accent),0 0 28px -2px var(--dk-glow)}
.dk-prompt{flex:none;width:26px;text-align:center;color:var(--dk-accent);font:700 1.1rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.dk-qbar .form-control,.dk-qbar .form-control:focus{flex:1;min-width:0;height:40px;padding:0 4px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;
  background:transparent;border:0;border-radius:6px;box-shadow:none}
.dk .form-select{flex:none;width:auto;height:36px;padding:0 28px 0 10px;font-size:.82rem;font-weight:600;color:var(--dk-text);background-color:var(--dk-raise);
  border-color:var(--dk-line);border-radius:8px;cursor:pointer;background-position:right 8px center;background-size:12px;
  --bs-form-select-bg-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E")}
.dk .form-select:focus:not(:focus-visible){border-color:var(--dk-line);box-shadow:none}
.dk-qbar .btn{--bs-btn-font-size:.85rem;--bs-btn-border-radius:8px;display:inline-flex;align-items:center;gap:8px;flex:none;height:36px;padding:0 12px 0 14px}
.dk-qbar kbd{font:600 .75rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:3px 5px;border-radius:4px;color:inherit;background:rgba(11,15,23,.18)}
.dk-meta{margin:10px 2px 0;font-size:.82rem;color:var(--dk-muted)}
.dk-meta b{color:var(--dk-text);font-weight:600}
/* C: field with recent searches */
.dk-panel{padding:8px;background:var(--dk-raise);border:1px solid #2a3446;border-radius:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.dk-panel .form-control{border-radius:12px}
.dk-recent{padding:14px 6px 4px}
.dk-recent-h{margin:0 10px 6px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dk-muted)}
.dk .list-group{--bs-list-group-bg:transparent;--bs-list-group-border-width:0;--bs-list-group-color:var(--dk-text);--bs-list-group-item-padding-x:10px;--bs-list-group-item-padding-y:9px;
  --bs-list-group-action-color:var(--dk-text);--bs-list-group-action-hover-color:var(--dk-text);--bs-list-group-action-hover-bg:#1f2937;--bs-list-group-action-active-bg:#1f2937;--bs-list-group-action-active-color:var(--dk-text)}
.dk .list-group-item{display:flex;align-items:center;gap:12px;border-radius:9px;font-size:.93rem}
.dk .list-group-item svg{flex:none;width:17px;height:17px;color:var(--dk-muted)}
.dk .list-group-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk .list-group-item small{flex:none;color:var(--dk-muted);font-size:.78rem}
@media (max-width:520px){.dk-qbar kbd{display:none}.dk .form-select{padding-right:24px}}
@media (prefers-reduced-motion:reduce){.dk-ico,.dk .form-control,.dk-qbar{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#9ca3af] uppercase">Glow on focus</span>
<form class="max-w-[620px] text-dk-text scheme-dark" role="search" aria-label="Music">
  <label class="sr-only" for="dk-music">Search music</label>
  <div class="group relative flex items-center">
    <svg class="pointer-events-none absolute top-1/2 left-[18px] size-[19px] -translate-y-1/2 text-dk-muted transition-colors duration-200 group-focus-within:text-dk-accent motion-reduce:transition-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="h-[52px] w-full min-w-0 appearance-none border border-dk-line bg-dk-surface pl-12 text-base text-dk-text transition-[border-color,box-shadow] duration-200 placeholder:text-dk-muted focus:border-dk-accent focus:shadow-[0_0_0_1px_var(--color-dk-accent),0_0_28px_-2px_rgba(34,211,238,.35)] focus:outline-none motion-reduce:transition-none rounded-full pr-28" id="dk-music" type="search" name="q" placeholder="Artists or albums">
    <button class="absolute top-1.5 right-1.5 h-10 cursor-pointer rounded-full bg-dk-accent px-5 text-[.92rem] font-bold text-dk-accent-ink transition-colors duration-150 hover:bg-[#67e8f9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dk-accent motion-reduce:transition-none" type="submit">Search</button>
  </div>
</form></div>

<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#9ca3af] uppercase">Query bar with a time range</span>
<form class="max-w-[620px] text-dk-text scheme-dark" role="search" aria-label="Logs">
  <label class="sr-only" for="dk-logs">Log query</label>
  <label class="sr-only" for="dk-when">Time range</label>
  <div class="flex items-center gap-1.5 rounded-xl border border-dk-line bg-dk-surface p-[5px] transition-[border-color,box-shadow] duration-200 focus-within:border-dk-accent focus-within:shadow-[0_0_0_1px_var(--color-dk-accent),0_0_28px_-2px_rgba(34,211,238,.35)] motion-reduce:transition-none">
    <span class="w-[26px] flex-none text-center font-mono text-[1.1rem] leading-none font-bold text-dk-accent" aria-hidden="true">›</span>
    <input class="h-10 min-w-0 flex-1 appearance-none rounded-md border-0 bg-transparent px-1 font-mono text-[.9rem] text-dk-text outline-none" id="dk-logs" type="search" name="q" value="status:500 path:/checkout" spellcheck="false" autocomplete="off" aria-describedby="dk-logs-meta">
    <select class="bg-chevron-dark h-9 flex-none cursor-pointer appearance-none rounded-lg border border-dk-line bg-dk-raise pr-7 pl-2.5 text-[.82rem] font-semibold text-dk-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dk-accent max-[520px]:pr-6" id="dk-when" name="range"><option>15 min</option><option>1 hour</option><option selected>24 hours</option><option>7 days</option></select>
    <button class="inline-flex h-9 flex-none cursor-pointer items-center gap-2 rounded-lg bg-dk-accent pr-3 pl-3.5 text-[.85rem] font-bold text-dk-accent-ink transition-colors duration-150 hover:bg-[#67e8f9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dk-accent motion-reduce:transition-none" type="submit">Run <kbd class="rounded bg-[rgba(11,15,23,.18)] px-[5px] py-[3px] font-mono text-xs leading-none font-semibold max-[520px]:hidden" aria-hidden="true">↵</kbd></button>
  </div>
  <p class="mx-0.5 mt-2.5 text-[.82rem] text-dk-muted" id="dk-logs-meta"><b class="font-semibold text-dk-text">1,284</b> matching lines from 3 services</p>
</form></div>

<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#9ca3af] uppercase">Field with recent searches</span>
<div class="max-w-[620px] rounded-[18px] border border-[#2a3446] bg-dk-raise p-2 text-dk-text shadow-[0_30px_60px_-30px_rgba(0,0,0,.8)] scheme-dark">
  <form role="search" aria-label="Notes">
    <label class="sr-only" for="dk-notes">Search notes</label>
    <div class="group relative flex items-center">
      <svg class="pointer-events-none absolute top-1/2 left-[18px] size-[19px] -translate-y-1/2 text-dk-muted transition-colors duration-200 group-focus-within:text-dk-accent motion-reduce:transition-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
      <input class="h-[52px] w-full min-w-0 appearance-none border border-dk-line bg-dk-surface pl-12 text-base text-dk-text transition-[border-color,box-shadow] duration-200 placeholder:text-dk-muted focus:border-dk-accent focus:shadow-[0_0_0_1px_var(--color-dk-accent),0_0_28px_-2px_rgba(34,211,238,.35)] focus:outline-none motion-reduce:transition-none rounded-xl pr-[18px]" id="dk-notes" type="search" name="q" placeholder="Search 312 notes">
    </div>
  </form>
  <div class="px-1.5 pt-3.5 pb-1">
    <p class="mx-2.5 mb-1.5 text-[.72rem] font-bold tracking-[.1em] text-dk-muted uppercase" id="dk-recent-h">Recent</p>
    <ul aria-labelledby="dk-recent-h">
      <li><a class="flex items-center gap-3 rounded-[9px] px-2.5 py-[9px] text-[.93rem] text-dk-text transition-colors duration-150 hover:bg-[#1f2937] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dk-accent motion-reduce:transition-none" href="?q=q4+roadmap"><svg class="size-[17px] flex-none text-dk-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span class="min-w-0 flex-1 truncate">Q4 roadmap</span><small class="flex-none text-[.78rem] text-dk-muted">2 hours ago</small></a></li>
      <li><a class="flex items-center gap-3 rounded-[9px] px-2.5 py-[9px] text-[.93rem] text-dk-text transition-colors duration-150 hover:bg-[#1f2937] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dk-accent motion-reduce:transition-none" href="?q=onboarding+checklist"><svg class="size-[17px] flex-none text-dk-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span class="min-w-0 flex-1 truncate">onboarding checklist</span><small class="flex-none text-[.78rem] text-dk-muted">Yesterday</small></a></li>
      <li><a class="flex items-center gap-3 rounded-[9px] px-2.5 py-[9px] text-[.93rem] text-dk-text transition-colors duration-150 hover:bg-[#1f2937] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dk-accent motion-reduce:transition-none" href="?q=vendor+invoices+march"><svg class="size-[17px] flex-none text-dk-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span class="min-w-0 flex-1 truncate">vendor invoices march</span><small class="flex-none text-[.78rem] text-dk-muted">Mon</small></a></li>
    </ul>
  </div>
</div></div>
CSS 
@theme {
  --color-dk-surface: #111827;
  --color-dk-raise: #161e2e;
  --color-dk-text: #e5e7eb;
  --color-dk-muted: #9ca3af;
  --color-dk-line: #6b7588;
  --color-dk-accent: #22d3ee;
  --color-dk-accent-ink: #0b0f17;
}
@utility bg-chevron-dark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
}

About this set

Search bars for dark interfaces, where a light-theme field becomes a grey smudge. Glow on focus is a pill field for a music app with a cyan button inside and a soft cyan glow when the field has focus. The query bar is a developer-tool style log search: a monospace field prefilled with status:500 path:/checkout, a time-range select, a Run button with an Enter hint and a line under the bar that reports 1,284 matching lines. Field with recent searches is a raised panel for a notes app with the field on top and three recent queries below it as links with timestamps. Borders use a lifted grey that reaches 3:1 against the dark surface, secondary text stays at 4.5:1 or better, and color-scheme: dark makes the native select menu and scrollbars dark as well. The Bootstrap version switches on Bootstrap’s own dark colour mode with data-bs-theme=”dark” and retunes it through CSS variables, and the Tailwind version uses the scheme-dark utility.

What’s included

  • Accent glow on focus for dark surfaces
  • Monospace query bar with a labelled time-range select
  • Recent searches panel with timestamps
  • color-scheme: dark for native pop-ups
  • Bootstrap version uses data-bs-theme="dark"

Accessibility

Every form has role="search" and an aria-label, and every input and select has a label, visually hidden where the design has no room for one. The query bar's result count is tied to the field with aria-describedby. Focus shows a bright cyan ring on fields and a 2px cyan outline on links, buttons and the select, and the glow transition is removed under prefers-reduced-motion.

Customise it

Set --dk-accent, --dk-surface, --dk-line and --dk-muted on .dk to recolour the set, and --dk-glow for the focus glow. Bootstrap maps them onto --bs-body-color and related variables; in Tailwind edit the --color-dk-* theme colours.