0

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

user3956534
  • 73
  • 1
  • 1
  • 7
  • 1
    possible duplicate of [css :selected pseudo class similar to :checked, but for for – ivan.mylyanyk Aug 27 '14 at 09:20

3 Answers3

2

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

philnash
  • 70,667
  • 10
  • 60
  • 88
1

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

Anoop Joshi P
  • 25,373
  • 8
  • 32
  • 53
0

Option tag has selected property, if selected.

So, you may write special CSS for that.

ivan.mylyanyk
  • 2,051
  • 4
  • 30
  • 37