我正在尝试做出这种行为。
当一个有一个列表框（或组合框）时，我的第一个元素（类似于“选择一个”）应该有一个特定的样式。
使用这个（测试）代码：
<style type="text/css">
.testX {font-style: italic;}
</style>
(...)
<select name="name" id="id">
<option class="testeX" selected="selected" value="#">
<p class="testX">Choose One</p>
</option>
<option value="TestValue">
TestValue
</option>
当我展开列表框时，我可以在 Firefox（但在 Chrome 中看不到）上看到这种行为，但是当我选择“选择一个”时，我的字段没有（斜体）样式。
我该怎么做？是否可以仅使用 HTML、CSS 或我需要更多（如 jQuery）来做到这一点？
谢谢。
【问题讨论】：
众所周知，表单元素很难设置样式，而且很多元素几乎不可能在浏览器和操作系统之间保持一致。我的方法一直是使用 javascript（通常是 jQuery）隐藏表单元素，并使用 div 和 spans 构造类似的东西。这样一来，就造型而言，天空才是极限。
你需要问问自己是否 100% 有必要拥有这种不同的风格；偏离标准表单元素并不是很好的可用性。
【讨论】：
从 HTML4 开始，OPTION 只能包含 PCDATA，即没有任何子元素的纯字符数据。字符将被解析（例如实体）。
http://www.w3.org/TR/html401/interact/forms.html#edef-OPTION
从 HTML5 开始，OPTION 中只允许使用文本内容。
http://dev.w3.org/html5/spec/the-option-element.html
换句话说，您使用的是无效的 HTML，任何浏览器都很难解析。事实上，我不知道有哪个浏览器能够在OPTION-tag 中显示 HTML 元素。 （……直到我读到这个问题……）
【讨论】：
尝试使用伪元素'first-child'
<style type="text/css">
select#id option:first-child {font-style: italic;}
</style>
并且段落标签不属于<option>标签内，它们应该包含纯文本。
但<option> 标签的样式有限，并非所有浏览器都支持它。您可能对其他类型的样式（例如背景颜色）有更多的运气。或者使用 javascript 和自定义 HTML 来模拟与常规 <select> 框相同的行为
【讨论】：
斜体不适用于 chrome 和 opera。请检查http://www.electrictoolbox.com/style-select-optgroup-options-css/
我们可以为选项提供任何设计。
<select name="name" id="id">
<option style='font-style: italic; font-weight:bold;' selected="selected" value="#">
<span>Choose One</span>
</option>
<optgroup label="Option group 1">
<option value="TestValue"> TestValue</option>
<option value="TestValue"> TestValue</option>
<option value="TestValue"> TestValue</option>
</optgroup>
</select>
css:
select option {
background: none repeat scroll 0 0 #E5E3E3;
border: 1px dotted #CCCCCC;
height: 15px;
line-height: 15px;
text-indent: 3px;
text-transform: capitalize;
z-index: -9999;
}
optgroup { /* Change font style and text alignment */
font-style:italic;
text-align:right;
}
【讨论】：
正如其他人已经指出的那样，标记是无效的，并且使 native 表单控件在浏览器之间保持一致的规模介于非常困难和不可能之间。
如果您不介意包含一个或多个库和/或插件的页面重量开销和，我认为您认为 JavaScript 解决方案可能是最省力和最安全的方法是正确的很高兴 <select> 的非 JS 后备看起来不那么漂亮。
在众多可用的<select> 替代jQuery 插件中，我强烈推荐Select 2 plugin。它具有丰富的功能集，已经支持向控件添加 占位符文本，您可以相应地设置样式。
【讨论】：
使用这个 CSS
select { font-style: italic; }
select option {
font-style: normal;
}
select option:first-child {
font-style: italic;
}
例如jsFiddle
但不幸的是，这种风格只适用于火狐
【讨论】：
并非所有浏览器都支持 <option> 标签内的 HTML 标签。
【讨论】：