Style option tag HTML

Question

I want to style my option tag. I want to set its height and its padding but it doesn't work. I tried to change option's background and this worked well but the height and the padding don't. Here is my HTML code:

  <select id="from_currency" >
    <option value="AED">AED</option>
    <option value="ARS">ARS</option>
    <option value="AUD">AUD</option>
    <option value="BGN">BGN</option>
    <option value="BRL">BRL</option>
  </select>

And CSS:

 option{ 
 padding:20px;
 height:40px;
 }

But these styles doesn't work.

The option element, and select elements are not really good at taking styles. There are a lot of libraries that simulate their behavior using more styleable elements. [Further Reading](https://stackoverflow.com/questions/1895476/how-do-i-style-a-select-dropdown-with-only-css) — John Pavek, Aug 29 '20 at 12:56

score 0 · Answer 1 · answered Aug 29 '20 at 12:25

Try adding a class to your options like this:

  <select id="from_currency" >
    <option class="option" value="AED">AED</option>
    <option class="option" value="ARS">ARS</option>
    <option class="option" value="AUD">AUD</option>
    <option class="option" value="BGN">BGN</option>
    <option class="option" value="BRL">BRL</option>
  </select>

and then in the css file do it like this

 .option{ 
 padding:20px;
 height:40px;
 }

In case that didn't work Make sure that you linked your CSS file correctly to your HTML file like this. And you won't need to add classes

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

Hope this helped :)

score 0 · Accepted Answer · answered Aug 29 '20 at 13:19

There is limited styling capability for <option>, as this element is an Operating System element. For better styling of <option> use plugins. For example this plugin (jquery is required). But you can style the selected element in this way - option[selected]. I have provided some examples of how you can style your <option>. Perhaps these are not all possible options.

 #from_currency{ 
   background-color: blue;
   color: green;
 }
 
 #from_currency2{ 
   font-size: 120%;
   width: 100%;
 }
 
 #from_currency3 option[selected]{ 
   background-color: green;
 }

<select id="from_currency" >
    <option value="AED">AED</option>
    <option value="ARS">ARS</option>
    <option value="AUD">AUD</option>
    <option value="BGN">BGN</option>
    <option value="BRL">BRL</option>
</select>

<select id="from_currency2" >
    <option value="AED">AED</option>
    <option value="ARS">ARS</option>
    <option value="AUD">AUD</option>
    <option value="BGN">BGN</option>
    <option value="BRL">BRL</option>
</select>

<select id="from_currency3" >
    <option value="AED">AED</option>
    <option value="ARS">ARS</option>
    <option value="AUD" selected>AUD</option>
    <option value="BGN">BGN</option>
    <option value="BRL">BRL</option>
</select>

score 0 · Answer 3 · answered Dec 15 '20 at 06:30

You cannot style the or tags with CSS. The only change that you can do with CSS is with Colors.

You have two options:

1 - You'll have to build your own custom dropdown using or similar tags.

2 - Use a library that allows you to create custom dropdowns with ease and provide you with extra events.

One good library is this: Select2

There are multiple other options available. You'll have to select the best one based on the tech/framework you're using.

Style option tag HTML

3 Answers3