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

【问题标题】：how to give style to the selected option in html如何为html中的选定选项赋予样式
【发布时间】：2013-02-19 08:01:27
【问题描述】：

我有这个标记我们

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

更新抱歉..我无法更改我的标记所以请在此标记中指导我...

【问题讨论】：

请参考这个链接你的问题微笑到这个stackoverflow.com/questions/8635317/…
你想做的事是不可能的。您链接到的站点将当前选定的选项存储在一个跨度（可以设置样式）中，并且仅在用户按下向下箭头时显示/隐藏
您可以在:focus 上更改整个事物的颜色，这将产生类似的效果：jsfiddle.net/rTgsX/1。聚焦，它是一种颜色，但模糊（和封闭）它是另一种颜色。

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

感谢您的回答，但我不能挂起标记，因为它是从循环中生成的。那么在css中有什么办法吗？
试试这个 CSS：select.offer-select option.selected {color: #f00;}
感谢您的回复，但您浏览过我的问题和参考链接了吗？我希望我选择的选项是红色的，而不是当我单击它们时的选项。默认选项将是蓝色的，就像参考链接一样。

【解决方案3】：

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

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

【讨论】：