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 http://stackoverflow.com/questions/8635317/i-want-to-change-the-color-of-the-select-options-texts — Francis Stalin, Feb 19 '13 at 08: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 — kjetilh, Feb 19 '13 at 08:31
You could change the color of the whole thing on `:focus`, which would give a similar effect: http://jsfiddle.net/rTgsX/1/. Focused, it is one color, but blurred (and closed) it is another color. — Tim M., Feb 19 '13 at 08:54

score 2 · Accepted Answer · answered Feb 19 '13 at 09:42

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>

score 1 · Answer 2 · answered Feb 19 '13 at 08:04

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 '13 at 08:04

Bud Damyanov

30,171
6
44
52

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? – NewUser Feb 19 '13 at 08:11
Try this CSS: select.offer-select option.selected {color: #f00;} – Bud Damyanov Feb 19 '13 at 08:16
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. – NewUser Feb 19 '13 at 08:49

score 0 · Answer 3 · answered Feb 19 '13 at 08:30

0

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.

answered Feb 19 '13 at 08:30

Francis Stalin

439
1
4
14

how to give style to the selected option in html

3 Answers3

Linked