select

Native selection control.

html

<label class="sel-wrap" style="--accent:#A8E6C1;">
  <span class="sel-wrap__label">Shipping country</span>
  <select class="sel-el" data-default="uk">
    <option value="uk" class="sel-el__opt--uk">United Kingdom</option>
    <option value="us" class="sel-el__opt--us">United States</option>
    <option value="de" class="sel-el__opt--de">Germany</option>
  </select>
</label>
<script>(function () { document.querySelectorAll("select[data-default]").forEach(function (s) { s.value = s.dataset.default; }); })();</script>
<style>
.sel-wrap { display: block; width: 240px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; }
.sel-wrap__label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 600; color: #241430aa; }
.sel-el { width: 100%; box-sizing: border-box; font: 14px system-ui, sans-serif; padding: 9px 10px; border-radius: 8px; border: 1.5px solid var(--accent); background: #FAF7F2; color: #241430; }
.sel-el:disabled { opacity: .5; }
</style>

tailwind

<label class="block w-[240px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-4 rounded-xl">
  <span class="block mb-1.5 text-xs font-semibold text-[#241430]/65">Shipping country</span>
  <select data-default="uk" class="w-full box-border text-sm px-2.5 py-2 rounded-lg border-[1.5px] bg-[#FAF7F2] text-[#241430] disabled:opacity-50" style="border-color:#A8E6C1">
    <option value="uk">United Kingdom</option>
    <option value="us">United States</option>
    <option value="de">Germany</option>
  </select>
</label>
<script>(function () { document.querySelectorAll("select[data-default]").forEach(function (s) { s.value = s.dataset.default; }); })();</script>

react

export function SelectElement({
  labelText = "Shipping country",
  defaultOption = "uk",
  accent = "#A8E6C1",
  disabled = false,
}) {
  return (
    <label style={{ display: "block", width: 240, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12 }}>
      <span style={{ display: "block", marginBottom: 7, fontSize: 12, fontWeight: 600, color: "#241430aa" }}>{labelText}</span>
      <select defaultValue={defaultOption} disabled={disabled}
        style={{ width: "100%", boxSizing: "border-box", font: "14px system-ui, sans-serif", padding: "9px 10px", borderRadius: 8, border: `1.5px solid ${accent}`, background: "#FAF7F2", color: "#241430", opacity: disabled ? 0.5 : 1 }}>
        <option value="uk">United Kingdom</option>
        <option value="us">United States</option>
        <option value="de">Germany</option>
      </select>
    </label>
  );
}