1

I have created a dropdown list in my reactjs project as follows

const sortDropDown = <div className={classes.customselect}>
    <select
    className={classes.sortSelector}
    id="lang"
    onChange={onChangeSort}
    // defaultValue={8}
    value={sortValue}
>
    <option className={classes.selectOption} value={''}>{sortValue}</option>

    {availableSortMethods.map((method,index)=>
        <option className={classes.selectOption} value={[method.text,method.attribute,method.sortDirection]}>{method.text}</option>
    )}
</select>
</div>

The options list is fetched from an array.I need to customize the options list box to add a border-radius as follows enter image description here

How can I do this with CSS to change border-radius values of the dropdown options list not the button.Please help

Sahan Thilakarathna
  • 167
  • 1
  • 11
  • You can follow the steps from this page (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select). Add border-radius inside the .select-items class and voila. I am not sure if you can style the select dropdown unless you make a custom one from scratch. – inerpiece Mar 19 '21 at 09:05
  • I need to style without a custom one.How can I do that – Sahan Thilakarathna Mar 19 '21 at 09:06
  • @SahanThilakarathna you cannot style the options in a select dropdown with CSS - they are rendered by the operating system. You must make a "select-like" box yourself, or use a library. – Yuji 'Tomita' Tomita Mar 19 '21 at 09:14
  • Does this answer your question? [How do I style a – Amaury Hanser Mar 19 '21 at 09:34

0 Answers0