Question

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

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

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

Answer 1

您可以使用:checked伪类来指定<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;
}

Demo

Answer 3

Option tag已选择了属性（如果已选中）。

所以，你可以为此编写特殊的CSS。

下拉菜单选择了不同的字体给别人

3 个答案: