下拉菜單選擇的字體與其他字體不同

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。