how to customize the option in select tag

Question

if I want to give margin padding or border radius on the dropdown of select tag. Its not working but its taking the font size and color property why I am not able to customize the option values

<select>
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>

css code given below

select, option {
    width: 250px;
}
option {
    font-size:16px;
    color:red;
    padding:10px;
    height:10px;
    border-radius:10px;
}

score 0 · Answer 1 · answered Feb 18 '22 at 12:13

0

There are only a few style attributes that can be applied to an element. This is because this element is an example of "replaced element". These are OS-dependent and are not part of the HTML or browser. It can't be styled through CSS.

You'll need to use some sort of libraries which provides elements which are simillar to this but they can be styled.

What you're asking is answered in detail here

answered Feb 18 '22 at 12:13

Huzaifa CS

1
3

if I am using it in react so what library should I import, can you suggest pls – Sougata Mukherjee Feb 18 '22 at 12:17
1

You can use styled-components or material UI if you're looking for advanced fully customisable UI components. If you understand CSS then moving onto Tailwind CSS would be nice. [Headless UI](https://headlessui.dev/) is a good beginner friendly UI kits as well. – Huzaifa CS Feb 21 '22 at 06:20

score 0 · Answer 2 · answered Feb 18 '22 at 12:44

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
      <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
      <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    
    </head>
    
    <body>
    
    
    
      <select class="js-example-basic-single" name="state">
        <option value="AL">Alabama</option>   
        <option value="WY">Wyoming</option>
      </select>
    
      <script>
        $(document).ready(function () {
          $('.js-example-basic-single').select2();
        });
      </script>
    
    </body>
    
    </html>

No, it's not possible, as the styling for these elements is handled by the user's OS.

There's a library you can use called Select2.

https://select2.org/options

how to customize the option in select tag

2 Answers2