选择不同尺寸的选项

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

的高度虽然不起作用。