0

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.

frangaren
  • 498
  • 3
  • 9
ONLY GAMES
  • 49
  • 2
  • 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

3 Answers3

0

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 :)

0

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>
s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25
0

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.

NigelDcruz
  • 897
  • 8
  • 18