Open demo

CSS code

HTML 
<div class="grid2">
<div><span class="lbl">Bordered</span>
<div class="f">
<label for="d1">Email address</label>
<input id="d1" name="email" type="email" autocomplete="email" placeholder="[email protected]">
</div>
</div>
<div><span class="lbl">Filled</span>
<div class="f f-filled">
<label for="d2">API key name</label>
<input id="d2" name="key-name" type="text" autocomplete="off" placeholder="Production">
</div>
</div>
</div>
<div><span class="lbl">Select</span>
<div class="f">
<label for="d3">Environment</label>
<div class="sel"><select id="d3" name="environment"><option>Production</option><option>Staging</option>
<option>Development</option></select></div>
</div>
</div>
<div><span class="lbl">Complete card</span>
<div class="dcard"><h2>Create a token</h2>
<form class="dstack">
<div class="f"><label for="d4">Token name <span class="req">(required)</span></label>
<input id="d4" name="token-name" type="text" autocomplete="off" placeholder="CI deploy" required></div>
<div class="f"><label for="d5">Expires</label>
<div class="sel"><select id="d5" name="expires"><option>30 days</option><option>90 days</option>
<option>Never</option></select></div></div>
<button class="dbtn" type="submit">Generate token</button>
</form>
</div>
</div>
CSS 
/* Dark fields: borders and placeholder text lifted until they reach 3:1 and 4.5:1 on the dark ground. */
.f{--f-text:#e6e9ef;--f-label:#a8b0c0;--f-hint:#8b93a7;--f-placeholder:#7f889c;--f-bg:#161b23;--f-fill:#0f141c;
  --f-border:#5f6b80;--f-fill-rule:#6b778c;--f-focus:#22d3ee;--f-ring:rgba(34,211,238,.18);--f-radius:9px;
  display:flex;flex-direction:column;gap:7px;max-width:360px}
.f label{font-size:.82rem;font-weight:600;color:var(--f-label)}
.f .req{font-weight:400;color:var(--f-hint)}
.f input,.f select{box-sizing:border-box;width:100%;font:inherit;font-size:.92rem;padding:11px 14px;color:var(--f-text);
  background:var(--f-bg);border:1px solid var(--f-border);border-radius:var(--f-radius);color-scheme:dark;
  transition:border-color .16s,box-shadow .16s}
.f input::placeholder{color:var(--f-placeholder)}
.f input:focus,.f select:focus{outline:0;border-color:var(--f-focus);box-shadow:0 0 0 3px var(--f-ring)}
/* filled: a darker well; the bottom rule keeps a 3:1 edge */
.f-filled input{background:var(--f-fill);border-color:transparent transparent var(--f-fill-rule);
  border-radius:var(--f-radius) var(--f-radius) 0 0}
/* select with a drawn arrow */
.sel{position:relative}
.sel select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.sel::after{content:"";box-sizing:border-box;position:absolute;right:16px;top:calc(50% - 7px);width:8px;height:8px;
  border-right:2px solid var(--f-hint);border-bottom:2px solid var(--f-hint);transform:rotate(45deg);pointer-events:none}
/* form card */
.dcard{background:#161b23;border:1px solid #232a36;border-radius:14px;padding:26px;max-width:420px}
.dcard h2{font-size:1.02rem;margin:0 0 18px;color:#e6e9ef}
.dstack{display:flex;flex-direction:column;gap:15px}
.dstack .f{max-width:none}
.dbtn{font:inherit;font-size:.9rem;font-weight:600;padding:11px 22px;border:0;border-radius:9px;background:#22d3ee;
  color:#04212a;cursor:pointer;align-self:flex-start;transition:background-color .16s}
.dbtn:hover{background:#67e8f9}
.dbtn:focus-visible{outline:2px solid #22d3ee;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.f input,.f select,.dbtn{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="grid2">
<div><span class="lbl">Bordered</span>
<div class="fx">
<label for="d1" class="form-label">Email address</label>
<input id="d1" name="email" class="form-control" type="email" autocomplete="email" placeholder="[email protected]">
</div>
</div>
<div><span class="lbl">Filled</span>
<div class="fx">
<label for="d2" class="form-label">API key name</label>
<input id="d2" name="key-name" class="form-control form-control-filled" type="text" autocomplete="off" placeholder="Production">
</div>
</div>
</div>
<div><span class="lbl">Select</span>
<div class="fx">
<label for="d3" class="form-label">Environment</label>
<select id="d3" name="environment" class="form-select"><option>Production</option><option>Staging</option>
<option>Development</option></select>
</div>
</div>
<div><span class="lbl">Complete card</span>
<div class="card fx"><div class="card-body">
<h2 class="card-title">Create a token</h2>
<form class="d-flex flex-column" style="gap:15px">
<div><label for="d4" class="form-label">Token name <span class="req">(required)</span></label>
<input id="d4" name="token-name" class="form-control" type="text" autocomplete="off" placeholder="CI deploy" required></div>
<div><label for="d5" class="form-label">Expires</label>
<select id="d5" name="expires" class="form-select"><option>30 days</option><option>90 days</option>
<option>Never</option></select></div>
<button class="btn align-self-start" type="submit">Generate token</button>
</form>
</div></div>
</div>
CSS 
/* Bootstrap's dark colour mode (data-bs-theme="dark"), retuned through --bs-* variables on .fx:
   borders reach 3:1 and placeholder text 4.5:1 on the dark ground. */
.fx{--bs-body-color:#e6e9ef;--bs-body-bg:#161b23;--bs-border-color:#5f6b80;--bs-border-radius:9px;
  --bs-secondary-color:#7f889c;--f-label:#a8b0c0;--f-hint:#8b93a7;--f-fill:#0f141c;--f-fill-rule:#6b778c;
  --f-focus:#22d3ee;--f-ring:rgba(34,211,238,.18);max-width:360px}
.fx .form-label{display:block;margin-bottom:7px;font-size:.82rem;font-weight:600;color:var(--f-label)}
.fx .req{font-weight:400;color:var(--f-hint)}
.fx .form-control,.fx .form-select{padding:11px 14px;font-size:.92rem;line-height:normal;transition:border-color .16s,box-shadow .16s}
.fx .form-control:focus,.fx .form-select:focus{border-color:var(--f-focus);box-shadow:0 0 0 3px var(--f-ring)}
/* filled: a darker well; the bottom rule keeps a 3:1 edge */
.fx .form-control-filled{background-color:var(--f-fill);border-color:transparent transparent var(--f-fill-rule);
  border-radius:var(--bs-border-radius) var(--bs-border-radius) 0 0}
.fx .form-control-filled:focus{background-color:var(--f-fill)}
.fx .form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%238b93a7' stroke-width='2' d='M1 1.5l5 5 5-5'/%3e%3c/svg%3e");
  padding-right:40px;background-position:right 14px center;background-size:12px 8px;cursor:pointer}
/* form card */
.fx.card{--bs-card-bg:#161b23;--bs-card-border-color:#232a36;--bs-card-border-radius:14px;--bs-card-spacer-x:26px;
  --bs-card-spacer-y:26px;max-width:420px}
.fx .card-title{font-size:1.02rem;font-weight:700;line-height:normal;margin-bottom:18px;color:var(--bs-body-color)}
.fx .btn{--bs-btn-padding-x:22px;--bs-btn-padding-y:11px;--bs-btn-font-size:.9rem;--bs-btn-font-weight:600;
  --bs-btn-line-height:normal;--bs-btn-border-width:0;--bs-btn-border-radius:9px;--bs-btn-bg:#22d3ee;--bs-btn-color:#04212a;
  --bs-btn-hover-bg:#67e8f9;--bs-btn-hover-color:#04212a;--bs-btn-active-bg:#22d3ee;--bs-btn-active-color:#04212a;--bs-btn-focus-box-shadow:none}
.fx .btn:focus-visible{background-color:var(--bs-btn-bg);color:var(--bs-btn-color);outline:2px solid var(--f-focus);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.fx .form-control,.fx .form-select,.fx .btn{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-[26px]">
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#8b93a7] uppercase">Bordered</span>
<div class="flex max-w-[360px] flex-col gap-[7px]">
<label for="d1" class="text-[.82rem] font-semibold text-[#a8b0c0]">Email address</label>
<input id="d1" name="email" type="email" autocomplete="email" placeholder="[email protected]" class="w-full rounded-[9px] border border-[#5f6b80] bg-[#161b23] px-[14px] py-[11px] text-[.92rem] text-[#e6e9ef] [color-scheme:dark] placeholder:text-[#7f889c] transition-[border-color,box-shadow] duration-[160ms] focus:border-[#22d3ee] focus:shadow-[0_0_0_3px_rgba(34,211,238,.18)] focus:outline-none motion-reduce:transition-none">
</div>
</div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#8b93a7] uppercase">Filled</span>
<div class="flex max-w-[360px] flex-col gap-[7px]">
<label for="d2" class="text-[.82rem] font-semibold text-[#a8b0c0]">API key name</label>
<input id="d2" name="key-name" type="text" autocomplete="off" placeholder="Production" class="w-full rounded-t-[9px] border border-transparent border-b-[#6b778c] bg-[#0f141c] px-[14px] py-[11px] text-[.92rem] text-[#e6e9ef] [color-scheme:dark] placeholder:text-[#7f889c] transition-[border-color,box-shadow] duration-[160ms] focus:border-[#22d3ee] focus:shadow-[0_0_0_3px_rgba(34,211,238,.18)] focus:outline-none motion-reduce:transition-none">
</div>
</div>
</div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#8b93a7] uppercase">Select</span>
<div class="flex max-w-[360px] flex-col gap-[7px]">
<label for="d3" class="text-[.82rem] font-semibold text-[#a8b0c0]">Environment</label>
<div class="relative after:pointer-events-none after:absolute after:top-[calc(50%-7px)] after:right-4 after:size-2 after:rotate-45 after:border-r-2 after:border-b-2 after:border-[#8b93a7]"><select id="d3" name="environment" class="w-full cursor-pointer appearance-none rounded-[9px] border border-[#5f6b80] bg-[#161b23] py-[11px] pr-10 pl-[14px] text-[.92rem] text-[#e6e9ef] [color-scheme:dark] transition-[border-color,box-shadow] duration-[160ms] focus:border-[#22d3ee] focus:shadow-[0_0_0_3px_rgba(34,211,238,.18)] focus:outline-none motion-reduce:transition-none"><option>Production</option><option>Staging</option>
<option>Development</option></select></div>
</div>
</div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#8b93a7] uppercase">Complete card</span>
<div class="max-w-[420px] rounded-[14px] border border-[#232a36] bg-[#161b23] p-[26px]"><h2 class="mb-[18px] text-[1.02rem] font-bold text-[#e6e9ef]">Create a token</h2>
<form class="flex flex-col gap-[15px]">
<div class="flex flex-col gap-[7px]"><label for="d4" class="text-[.82rem] font-semibold text-[#a8b0c0]">Token name <span class="font-normal text-[#8b93a7]">(required)</span></label>
<input id="d4" name="token-name" type="text" autocomplete="off" placeholder="CI deploy" required class="w-full rounded-[9px] border border-[#5f6b80] bg-[#161b23] px-[14px] py-[11px] text-[.92rem] text-[#e6e9ef] [color-scheme:dark] placeholder:text-[#7f889c] transition-[border-color,box-shadow] duration-[160ms] focus:border-[#22d3ee] focus:shadow-[0_0_0_3px_rgba(34,211,238,.18)] focus:outline-none motion-reduce:transition-none"></div>
<div class="flex flex-col gap-[7px]"><label for="d5" class="text-[.82rem] font-semibold text-[#a8b0c0]">Expires</label>
<div class="relative after:pointer-events-none after:absolute after:top-[calc(50%-7px)] after:right-4 after:size-2 after:rotate-45 after:border-r-2 after:border-b-2 after:border-[#8b93a7]"><select id="d5" name="expires" class="w-full cursor-pointer appearance-none rounded-[9px] border border-[#5f6b80] bg-[#161b23] py-[11px] pr-10 pl-[14px] text-[.92rem] text-[#e6e9ef] [color-scheme:dark] transition-[border-color,box-shadow] duration-[160ms] focus:border-[#22d3ee] focus:shadow-[0_0_0_3px_rgba(34,211,238,.18)] focus:outline-none motion-reduce:transition-none"><option>30 days</option><option>90 days</option>
<option>Never</option></select></div></div>
<button type="submit" class="cursor-pointer self-start rounded-[9px] bg-[#22d3ee] px-[22px] py-[11px] text-[.9rem] font-semibold text-[#04212a] transition-colors duration-[160ms] hover:bg-[#67e8f9] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#22d3ee] motion-reduce:transition-none">Generate token</button>
</form>
</div>
</div>

About this set

Form fields tuned for dark interfaces such as developer dashboards and admin panels, with a cyan accent. Bordered is a raised slate field with a mid-grey border; filled is a darker well with a bottom rule and square lower corners. The select keeps the native control with a drawn chevron, and every field sets color-scheme: dark so the browser draws its option list and autofill in dark colours too. The complete card puts a token name field, an expiry select and a cyan Generate token button together on a bordered dark panel, with the required field marked in its label. The common mistake with dark forms is borders and placeholder text that disappear; here the borders are lifted until they reach 3:1 against both the page and the card, placeholder text 4.5:1, and the grey demo captions are lightened to match. The Bootstrap version switches on Bootstrap’s own dark colour mode with data-bs-theme=”dark” and retunes it through –bs-* variables, using .form-control, .form-select, .card and .btn; the Tailwind version uses arbitrary colour values and the [color-scheme:dark] utility.

What’s included

  • Bordered and filled inputs, a select and a complete form card
  • Borders at 3:1 and placeholders at 4.5:1 on the dark ground
  • color-scheme: dark for native option lists and autofill
  • Bootstrap version uses data-bs-theme="dark" with .form-select and .card
  • Cyan focus ring and button outline

Accessibility

Every field has a visible label, and the required field says so in text. Borders reach 3:1, labels and placeholder text 4.5:1 or better on the dark ground. Focus turns the border cyan with a soft 3px ring, and the button shows a 2px cyan outline on keyboard focus. The select is native, so keyboard and screen reader behaviour are the browser's own. Transitions are removed under prefers-reduced-motion.

Customise it

In plain CSS change --f-bg, --f-fill, --f-border, --f-focus and --f-ring on .f, and the .dbtn background. In Bootstrap set --bs-body-bg, --bs-border-color and --f-focus on .fx and the --bs-btn-* variables on the button; in Tailwind edit the bg-, border- and focus: colour classes.