選擇不同尺寸的選項

Question

我正嘗試使用不同尺寸的下拉菜單，因爲我的選項位於不同的組中。

我可以改變文本的顏色，背景的顏色，但不是選項既不字體大小（我的意思是，我可以改變它，但不具有2級獨立的）

的高度代碼

<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

你知道一個元素稱爲<optgroup>專門爲這樣的事情？

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

如果你想改變optgroup TEXTSIZE試試這個

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

Change Size Of OPTGROUP Header Fiddle

Answer 2

不幸的是，風格都相當了很多表單元素的限制。 <option>標籤可以有一些更改的樣式，但字體大小不是其中之一。這還取決於您使用的瀏覽器。

對什麼是可能的概述，請參閱此頁： http://www.electrictoolbox.com/style-select-optgroup-options-css/

Answer 3

這裏是我是如何做到的

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

的高度雖然不起作用。