dropdown menu selected option different font to others

Question

Basically I have a dropdown menu :

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

How can I have separate style for the option that has been selected. So the selected one has a different font size to the one that is not selected. When the other is selected it has the selected font size and the one that was selected not has the non-selected font size

Answer 1

You can use the :checked psuedo class to specify the currently selected <option> in the <select> .

So your CSS might look like this:

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

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

I wrote a quick example on JSBin here: http://jsbin.com/nohovaqikafe/1/edit

Answer 2

You can do like this way. While selecting an option, add a particular class to it.

$("#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 has selected property, if selected.

So, you may write special CSS for that.