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…

Answer 1

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>