Option de taille différente dans une sélection

Question

J'essaye de faire une liste déroulante avec la taille différente parce que mes options sont dans différents groupes.

Je peux changer la couleur du texte, la couleur de l'arrière-plan, mais pas la hauteur de l'option ni la taille de la police (je veux dire, je peux changer, mais pas 2 les séparés)

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

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

Êtes-vous au courant d'un élément appelé <optgroup> spécialement pour quelque chose comme ça?

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

Et si vous voulez changer le optgroup textsize essayer

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

Change Size Of OPTGROUP Header Fiddle

Answer 2

Malheureusement, les styles sont assez limités sur un grand nombre d'éléments de formulaire. La balise <option> peut avoir des styles modifiés, mais la taille de police n'en fait pas partie. Cela dépend également du navigateur que vous utilisez.

Voir cette page pour un aperçu de ce qui est possible: http://www.electrictoolbox.com/style-select-optgroup-options-css/

Answer 3

Voici comment je l'ai fait

HTML

<select> 
<optgroup label="Title 1"></optgroup> 

    <option>Select 1</option> 
    <option>Select 2</option> 

    <optgroup label="Title 2"></optgroup> 

    <option>Select 3</option> 
</select> 

CSS

select 
{ 
width: 100%; 
font-size:24px; 
} 
select optgroup 
{ 
color:#E0E0E0; 
font-size:12px; 
font-weight:bold; 
background-color:#0000FF; 
} 
select option 
{ 
color:#0000FF; 
font-weight:normal; 
background-color:#FFFFFF; 
} 

la hauteur cependant ne fonctionne pas.