Question

我有这个标记我们

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

现在，您可以看到所选的第一个选项是卖出优惠。现在我希望所选的选项应为红色，其余所有选项应为黑色。就像this网站一样。在这里，您可以看到选项产品默认为蓝色，当您单击选项时，它们的颜色为黑色。所以我只想要这个。我想用css制作它。不是在jQuery中。那么有人可以告诉我该怎么做吗？任何帮助和建议都会非常明显。

更新对不起..我无法更改我的标记所以请在此标记中引导我...

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

如何为html中的选定选项赋予样式

3 个答案: