I'm trying to change the individual style of the options of a select dropbar and make the corne-CodePudding

I'm using tailwind to style but am not sure how to change it in CSS either heres the code for the select

<select >
 <option>red</option>
  <option>green</option>
  <option>blue</option>          
</select>

I can't change it by adding class to the options and doing it that way and haven't been able to find how to change the options background, text colour and rounding the edges of the dropdown menu.

So it looks like image 1 and i want it to look more like image 2

I've also tryed doing it through CSS to no avail either any help would be greatly appreciated thanks.

CodePudding user response：

Indeed, you cannot style the select options with CSS. What you can do is create your own select component. To get everything, like accessibility, working well can be tricky though.

You could take the Headless UI listbox as a starting point. This is an unstyled custom select, created to style with Tailwind CSS.

Hope this helps.

CodePudding user response：

there is no accessible options container (wrapper) element in the Dom in order to change it's style. you can create your own dropdown :

    <!-- Component Start -->
    <div >
        <button >
            <span >
                Dropdown
            </span>
            <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
        </button>
        <div >
            <a  href="#">Item 1</a>
            <a  href="#">Item 2</a>
            <a  href="#">Item 3</a>
            <a  href="#">Item 4</a>
        </div>
    </div>
    <!-- Component End  -->