how to give style to the selected option in html

Question

I have this mark us

<div class="styled-offer"> <select style="font-size:13px;" class="select offer-select" name="type"> <option selected="" class="selected" value="1">Sell Offers</option> <option value="2">Buy Offers</option> <option value="3">Products</option> <option value="4">Companies</option> <option value="5">Business Directory</option> <option value="6">Classified</option> </select> </div>

Now here you can see the first option which is selected is Sell Offers. Now I want the selected option should be in red color and all rest of options should be in black color. Just like this site. Here you can see the option products is by default blue in color and when you click on the options they are black in colors. So I just want this. I want to make it in css. Not in jQuery. So can someone kindly tell me how to do this? Any help and suggestions will be really appreciable.

Update Sorry..I can't change my markup So kindly guide me in this markup...

pls refer this link ur question smiler to this stackoverflow.com/questions/8635317/… — Francis Stalin
– Francis Stalin, Commented Feb 19, 2013 at 8:16
What you want to do is not possible. The site you're linking to stores the current selected option in a span (which can be styled) and only show/hide the <select> item when the user presses the down arrow. You have to use JavaScript. — kjetilh
– kjetilh, Commented Feb 19, 2013 at 8:31
You could change the color of the whole thing on :focus, which would give a similar effect: jsfiddle.net/rTgsX/1. Focused, it is one color, but blurred (and closed) it is another color. — Tim M.
– Tim M., Commented Feb 19, 2013 at 8:54

NewUser · Accepted Answer · 2013-02-19 09:42:35Z

Hey thanks all for all of your answers but finally I got the solution. It was damn easy... My markup was like this

<div class="styled-offer"> <select style="font-size:13px;" class="select offer-select" name="type"> <option selected="" class="selected" value="1">Sell Offers</option> <option value="2">Buy Offers</option> <option value="3">Products</option> <option value="4">Companies</option> <option value="5">Business Directory</option> <option value="6">Classified</option> </select> </div>

Now my css will be like this..

<style type="text/css"> .styled-offer select.offer-select { color: #F00; } .styled-offer select.offer-select option { color: #333; } </style>

Bud Damyanov · Accepted Answer · 2013-02-19 08:04:56Z

1

Try to apply your CSS class "selected" to a span, rather to the option itself:

<option selected="" value="1"><span class="selected" >Sell Offers</span></option>

answered Feb 19, 2013 at 8:04

Bud Damyanov

32.1k7 gold badges47 silver badges53 bronze badges

3 Comments

NewUser Over a year ago

thanks for the answer but I can't hange the markup as because it is generated from the loop. So is there any way to do in css?

Bud Damyanov Over a year ago

Try this CSS: select.offer-select option.selected {color: #f00;}

NewUser Over a year ago

thanks for the reply but have you gone through my question and reference link? I want my selected option to be in red color not the options when I will click on them. The default option will be in blue color just like the reference link.

Francis Stalin · Accepted Answer · 2013-02-19 08:30:19Z

http://tympanus.net/Tutorials/CustomDropDownListStyling/index.html

if u are using default drop down it is not possible try custom drop down.try this link it might helpful.

Collectives™ on Stack Overflow

how to give style to the selected option in html

3 Answers 3

Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Linked

Related