html - 特定元素中的列表框样式(选项)HTML

Question

我正在尝试做出这种行为。

当有一个列表框(或组合框)时，我的第一个元素(类似于“选择一个”)应该有一个特定的样式。

使用此(测试)代码:

<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)来做到这一点？

谢谢。

Answer 1

众所周知，表单元素很难设计样式，而且许多元素几乎不可能在浏览器和操作系统之间保持一致。我的方法一直是使用 javascript(通常是 jQuery)隐藏表单元素，并使用 div 和 span 构建类似的东西。这样一来，在造型方面没有限制。

不过，您需要问问自己是否 100% 有必要拥有这种不同的风格；偏离标准表单元素并不是很好的可用性。