如何给html中的所选选项样式 [英] how to give style to the selected option in html

问题描述

我有这个标记。

<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>

现在，您可以看到所选择的第一个选项是卖出。现在我想要选择的选项应该是红色，所有其余的选项应该是黑色的。就像此网站。在这里，您可以看到选项产品默认为蓝色，当您点击选项它们是黑色的颜色。所以我只想要这个。我想在css中。不在jQuery。所以有人可以告诉我怎么做吗？

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...

推荐答案

感谢所有的答案，但最终我得到的解决方案。这是很容易...
我的标记是这样

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>

现在我的CSS将会是这样..

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>

这篇关于如何给html中的所选选项样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！