How to change font size of the first option tag in a dropdown menu (select)?

html css select font-size

17,321

Solution 1

If this below is the option you want to change the font size in SELECT tag

    <option id="op1">option 1</option>

Place the below code in head element

   <script>
     document.getElementById("op1").style.fontSize ="25px";
   </script>

Solution 2

CSS

 <style>


 select{
          width: 150px;
          height: 30px;
          padding: 5px;
         font-size:12px;
        }
        select option { color: black; }
        select option:first-child
        {
          color: green;
          font-size:25px;
        }
        </style>

HTML

  <select>
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
    <option>item4</option>
    <option>item5</option>
    </select>

Demo

Solution 3

Please refer to this live demo.. Demo.

HTML

    <div>
        Select
        <ul>
            <li><a id="first" href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </div>

css

  div { 
        margin: 10px;
        padding: 10px; 
        border: 2px solid purple; 
        width: 200px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    #first{
        font-size:25px;

    }
    div > ul { display: none; }
    div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
    div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
    div:hover > ul > li:hover { background: white;}
    div:hover > ul > li:hover > a { color: red; }

Solution 4

you can do it using CSS first-child.

Note: Does not works in webkit browser. Change the structure to ul > li.

Here is the demo

select {
  font-size: 12px
}
select option:first-child {
  font-size: 25px
}

Solution 5

You would add an id to the option tag like this:

<option id="newFont">Some option</option>

And then in the css:

option {
font-size: 12px;
}

option#newFont{
font-size: 25px;
}

View more solutions

17,321

Author by

hello

Updated on June 04, 2022

Comments

hello about 2 years
How can I change the font size for the first option tag in a select tag? I've tried changing the CSS for the option:first-child with no luck.

I would like the first option to have 25px font-size while the other items on the list to have 12px font-size.

I've already read tutorials here that can change the font color and font type for the first option, but when I applied font-size on them, it doesn't seem to take effect.

Can this be achieved through CSS or JQuery? Thanks!

HTML Code:
```
<select>
<option>Select (25px)</option>
<option>List 1 (12px)</option>
<option>List 2 (12px)</option>
<option>List 3 (12px)</option>
<option>List 4 (12px)</option>
</select>
```
Leo over 10 years

-1 Absolutely nothing...but it's an awful solution to use jquery for something that can be achieved with css
Dimag Kharab over 10 years

@leo but -1 for this justified ? its was a jquery solution
Kyo over 10 years

An awful solution to use jQuery? The question was asking, 'Can this be achieved through CSS or JQuery?'
Leo over 10 years

@Kyo This is the question "Can this be achieved through CSS or JQuery? " And in my opinion (as I said) the answer is valid BUT I still have the right vote on the best answer, and that's exactly what I did
Kyo over 10 years

@Leo I wouldn't -1 on the correct solutions based on your preference. In the context of how the question is phrased, the solution can be implemented both via CSS and jQuery.
Leo over 10 years

I did not say it was wrong...I said awful...because your adding unnecessary script execution to the browser, more dependencies between scripts and html (not to mention that you are calling the element by its name) and basically it looks like a hack, not a solution. What's still not clear? Why do I have to defend my right to vote something down?
hello over 10 years

hi, thanks. but im modifying an option tag in a select tag, not li in ul.
hello over 10 years

tried this, not working for me. maybe you can help me via jsfiddle so i can see? thanks for the help!
Amila Iddamalgoda over 10 years

Ok..glad to help you out friend ! ;) And also you can accept the answer
hello over 10 years

in the demo, only the color changed for the first option, not the size. all option font sizes are the same in Chrome.
hello over 10 years

I'm using Chrome, all option fonts have the same size.
hello over 10 years

hi, i tried this but it's inheriting 12px even if i add the jquery in the head.
hello over 10 years

that is why i am asking if there is a jquery solution, if css wont be able to do it
shubhraj over 10 years

<optgroup style="font-size:10px"> <option>Option 1</option> </optgroup>
Joshua Terrill over 10 years

You're right! I shouldn't assume. I've been looking at other threads and it appears that using the select option[val="1"] selector works on older browsers, but not in the newest version of Chrome (which is what I'm using). I'll keep looking for a solution!
hello over 10 years

Yes it did. is this cross-browser? I hope it is! Thanks for the miracle and creativity!
Tushar over 10 years

yeah! its not working in chrome. This is a known issue in webkit browser. I'll suggest you to change the structure to ul > li.
shubhraj over 10 years

it should be opera 9.2+ and above
Admin about 10 years

This should be the answer.
dlchambers over 9 years

Same experience as @hello - colors differ but font-size all the same