Bradley Kirton's Blog

<div class="flex flex-col gap-5">
    <div>
        <label for="background-image">Using a background-image for the chevron</label>
        <select
            id="background-image"
            style="--background-image-url: url('{{ background_image_url }}')"
            class="
            appearance-none
            block bg-white w-full border border-lime-300 rounded-md
            py-2 pl-9 pr-3
            shadow-sm
            focus:outline-none focus:border-lime-500 focus:ring-lime-500 focus:ring-1
            bg-[image:var(--background-image-url)]">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>
    <div>
        <label for="absolute-element">Using an absolute positioned element for the chevron</label>
        <div class="relative">
            <select
                id="absolute-element"
                class="
                appearance-none
                bg-none
                block bg-white w-full border border-lime-300 rounded-md
                py-2 pl-9 pr-3
                shadow-sm
                focus:outline-none focus:border-lime-500 focus:ring-lime-500 focus:ring-1">
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
            <svg
                class="absolute right-[0.7rem] top-1/4"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round">
                <circle cx="12" cy="12" r="8"></circle>
                <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
                <line x1="9" y1="9" x2="9.01" y2="9"></line>
                <line x1="15" y1="9" x2="15.01" y2="9"></line>
            </svg>
        </div>
    </div>
</div>