Question

我正试图做出这种行为。

当有一个listBox（或comboBox）时，我的第一个元素（类似“选择一个”）应具有特定的样式。

使用此（测试）代码：

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

当我展开我的listBox时，我可以在Firefox上看到这种行为（但不会在Chrome中），但是当我选择“选择一个”时，我的字段没有（斜体）样式。

我该怎么做？有可能只用HTML，CSS或者我需要更多（比如jQuery）吗？

感谢。

Answer 1

尝试使用伪元素'first-child'

 <style type="text/css">
       select#id option:first-child {font-style: italic;}
 </style>

段落标记不属于<option>标记内，它们应包含纯文本。

但<option>标签上的样式是有限的，并非所有浏览器都支持它。你可能会有更多运气与其他类型的样式，如背景颜色。或者使用javascript和自定义HTML来模拟与常规<select>框

相同的行为

Answer 2

众所周知，表单元素很难设计风格，而且很多都不可能在浏览器和操作系统之间保持一致。我的方法一直是使用javascript（通常是jQuery）隐藏表单元素，并使用div和spans构造类似的东西。这就是天空在造型方面的极限。

你需要问自己，是否100％必须拥有不同的风格;偏离标准形式元素并不是很好的可用性。

Answer 3

从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 - 标签内显示HTML元素。（......直到我读到这个问题......）

Answer 4

使用此CSS

select { font-style: italic;   }

select option  {
  font-style: normal;  
}

select option:first-child {
  font-style: italic;  
}

示例jsFiddle
但不幸的是，这种风格仅适用于Firefox

Answer 5

正如其他人已经指出的那样，加价是无效的，并且在浏览器之间获得 native 形式控件的一致性是非常难以实现的。

在我看来，如果您不介意包含一个或多个库和/或插件和的页面重量开销，那么您认为JavaScript解决方案可能是最省力且最安全的方法是正确的。很高兴<select>的非JS后备不那么漂亮。

在可用的许多<select>替换jQuery插件中，我强烈推荐Select 2 plugin。它具有丰富的功能集，已经支持将占位符文本添加到您可以相应设置样式的控件中。

Answer 6

斜体不适用于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;
}

列表特定项目中的框样式（选项）HTML

6 个答案: