Custom Select

by Sebastian Kay

HTML

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5 w-full">
<select class="custom-select px-3 py-2 text-white border-2 rounded border-sky-500 open:border-sky-200 open:rounded-b-none">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 4</option>
    <option>Option 5</option>
</select>
</div>

CSS

.custom-select {
  appearance: base-select;
}

.custom-select option {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  border-width: 2px;
  border-color: blue;
  border: 2px solid blue;
  background: #eeeeee;
  padding: 10px;
  transition: 0.4s;
}

.custom-select option:first-of-type {
  border-radius: 8px 8px 0 0;
}

.custom-select option:last-of-type {
  border-radius: 0 0 8px 8px;
}

JavaScript

document.querySelector("html").dataset.theme = "dark";
document.querySelector("body").className = "bg-white dark:bg-gray-900 p-5";