spur-tailwind/css/components/select.css

Spur web UI

$chevron: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z"/></svg>';

.select {
  @apply relative;
}

.select-input {
  @apply pl-4 pr-12 h-11 w-full border border-spur-grey rounded-md bg-white truncate appearance-none cursor-pointer;
}

.select-input[disabled] {
  @apply bg-filter-grey cursor-not-allowed;
}

.select::after {
  @apply absolute block w-4 h-4 bg-no-repeat bg-center pointer-events-none;
  top: 50%;
  right: 1rem;
  content: '';
  background-image: url($chevron);
  transform: translateY(-50%);
}

.select-placeholder {
  @apply absolute inset-0 px-4 flex items-center pointer-events-none text-border-line-purple;
}

.input.has-icon .select-input {
  @apply pl-14;
}

/* Style modifiers */
.select.has-light-border .select-input {
  @apply border-border-line-purple;
}
/* blank select on scheduler */
.select.is-blank .select-input {
  @apply border-0 bg-transparent appearance-none outline-none pl-0;
}