在选择框中设置 HTML 选定值的样式答案

【问题标题】：Style HTML selected value in a select box在选择框中设置 HTML 选定值的样式
【发布时间】：2012-05-12 22:32:06
【问题描述】：

我已经到处搜索了这个，但在任何地方都没有找到。开始觉得不可行。我的问题是：

是否可以使用 CSS 设置样式，选择框的选定值？

我正在使用这个代码和类 pretty-select 来设置整个选择框的样式！

  <div class="pretty-select">
    <select name="city" class="city">
      <option value="Porto" selected="selected">Porto</option>
      <option value="Penafiel">Penafiel</option>
      <option value="Lisboa">Lisboa</option>
      <option value="Madrid">Madrid</option>
      <option value="Barcelona">Barcelona</option>
    </select>
  </div>

感谢您的宝贵时间！干杯

【问题讨论】：

HTML <select> selected option background-color CSS style 的可能重复项

标签： html css forms select

【解决方案1】：

如果您不反对使用 jQuery UI，您可以随意自定义它。

http://view.jqueryui.com/selectmenu/demos/selectmenu/default.html

【讨论】：

【解决方案2】：

不幸的是，使用纯 CSS 无法实现您的要求。但是，您可以选择以下类似的方法作为解决方法。

查看实时代码http://jsfiddle.net/Etr4F/

HTML：

<div>
Select
<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
</ul>
</div>

CSS：

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }

干杯！！

【讨论】：