0

我有这个标记我们

<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 中。那么有人可以告诉我该怎么做吗？任何帮助和建议都将是非常可观的。

更新 对不起..我无法更改我的标记所以请在这个标记中指导我...

4

3 回答 3

2

嘿，谢谢大家的所有回答，但最后我得到了解决方案。这太容易了......我的标记是这样的

<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会是这样的..

<style type="text/css">
  .styled-offer select.offer-select {
    color: #F00;
  }
  .styled-offer select.offer-select option {
    color: #333;
  }
  </style>
于 2013-02-19T09:42:35.750 回答
1

尝试将您的 CSS 类“选择”应用于 a span，而不是应用于option自身：

<option selected="" value="1"><span class="selected" >Sell Offers</span></option>
于 2013-02-19T08:04:56.407 回答
0 
http://tympanus.net/Tutorials/CustomDropDownListStyling/index.html

如果您使用默认下拉菜单，则无法尝试自定义下拉菜单。尝试此链接可能会有所帮助。

于 2013-02-19T08:30:19.153 回答