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

Question

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>

Answer 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>

Answer 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

Answer 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; }

Answer 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
}

Answer 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;
}

Answer 6

use css

html

<select id="yourSelect">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

css

 <style>
 #yourSelect > option:first-child
 {
   font-size: 25px;
 }
 </style>

or by jquery
jquery

jQuery("#yourSelect option:first-child").css('font-size', '25px');

Answer 7

i will think twice to do like that because of browser limitation. Do check here :

http://www.electrictoolbox.com/style-select-optgroup-options-css/

Answer 8

$('select').find('option').eq(0).css({font-size: '25px'});

Answer 9

// #target = your select box id 
// fontSize = your  font size;

$("#target option:first").css('font-size', fontSize);