下拉菜单中选择选项不同的字体他人

Question

基本上我有一个下拉菜单：

<select id='getbusornew' style="font-size:14px;" > 
    <option value='News'> 
     BBC News 
    </option> 
    <option value='Business' > 
     Business News 
    </option> 
</select> 

怎样才可以有不同的样式已经选择的选项。因此，所选字体的字体大小与未选中的字体大小不同。当其它选择它具有选定的字体大小和选择不具有非选择字体大小

Answer 1

可以使用:checked伪类来指定在<select>当前选择<option>。

所以你的CSS可能是这样的：

#getbusornew option { 
    font-size: 16px; 
} 

#getbusornew option:checked { 
    font-size: 18px; 
} 

我写了一个简单的例子就JSBin这里：http://jsbin.com/nohovaqikafe/1/edit

Answer 2

Option tag已经选择属性，如果所选择的一个。

所以，你可以写那个特别的CSS。

Answer 3

你可以这样做的方式。在选择一个选项时，向它添加一个特定的类。

$("#getbusornew :selected").addClass("selected"); 
$("#getbusornew").change(function(){ 
    $(".selected").removeClass("selected"); 
    $("#getbusornew :selected").addClass("selected"); 
}); 

CSS

.selected 
{ 
    font-size:20px; 
    color:red; 
} 

Demo