下拉菜单选择的字体与其他字体不同

Question

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

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

如何为已选择的选项设置单独的样式。 因此，所选字体的字体大小与未选择的字体大小不同。 当另一个被选中时，它具有选定的字体大小，而另一个未被选定的则具有未选定的字体大小

Answer 1

您可以使用:checked psuedo类在<select>指定当前选择的<option> <select> 。

因此，您的CSS可能如下所示：

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

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

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

Answer 2

您可以这样操作。 选择一个选项时，向其中添加一个特定的类。

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

的CSS

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

演示版

Answer 3

选项标签已选择属性（如果已选择）。

因此，您可以为此编写特殊的CSS。