Question

I am trying to do a dropdown with different size because my options are in different groups.

I can change the color of the text, the color of the background, but not the height of the option neither the font-size (I mean, I can change it but not have 2 separate ones)

the code

<select>
    <option class="title" disabled>Title 1</option>
    <option>Select 1</option>
    <option>Select 2</option>
    <option class="title" disabled>Title 2</option>
    <option>Select 3</option>
 </select>

the CSS

select .title
{
    color:#E0E0E0;
    font-size:12px;
    font-weight:bold;
    height:15px;
    background-color:#0000FF;
}

select option
{
    color:#0000FF;
    font-size:24px;
    font-weight:normal;
    height:30px;
    background-color:#0000FF;
}

Answer 1

Are you aware of a element called <optgroup> specially for something like this?

<select>
     <optgroup label="Title 1">
       <option>Select 1</option>
       <option>Select 2</option>
     </optgroup>
     <optgroup label="Title 2">
        <option>Select 3</option>
     </optgroup>
</select>

And if you want to change the optgroup textsize try this

optgroup:before {
    content: "Demo";
    font-size: 18px;
}

Change Size Of OPTGROUP Header Fiddle