Style option tag HTML

Question

Style option tag HTML

133 views Asked by ONLY GAMES At 08 December 2024 at 13:01

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.

Original Q&A

There are 3 answers

NigelDcruz On 15 December 2020 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.

AudioBubble On 29 August 2020 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 :)

**s.kuznetsov** · Accepted Answer · 2020-08-29T13:19:07+00:00

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>

TechQA.

Style option tag HTML

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Popular Questions

Popular Tags

Trending Questions