列表框样式中的特定项目（选项）HTML(List Box Style in a particular

我试图做出这种行为。

当有一个列表框（或组合框），我的第一个元素（像“选择一个”）应该有一个特定的风格。

与此（测试）代码：

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

斜体没有在Chrome和Opera应用。 PLZ检查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;
}

Answer 2:

表单元素是出了名的难以风格，很多都是在附近，不可能得到跨浏览器和操作系统是一致的。我的做法一直是隐藏的表单元素使用JavaScript（jQuery的一般），并使用div的，跨越构造类似的东西。这样，在天空的极限，当谈到造型。

你需要问自己，如果是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，那就是几乎没有受到任何浏览器解析。其实我不知道一个单一的浏览器，能够显示内部的HTML元素的OPTION -标记。（...直到我读了这个问题...）

Answer 4:

尝试使用伪元素“第一个孩子”

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

和段落标记不属于里面<option>标签时，应包含纯文本。

但在造型<option>标签是有限的 ，不是所有的浏览器都支持它。你可能有更多的运气与其他类型的造型，像背景颜色。或使用JavaScript和自定义HTML来模拟相同的行为作为一个普通<select>框

Answer 5:

正如其他人已经指出的那样，加价是无效的，跨浏览器是上规模的地方非常困难之间不可能得到本地表单控件一致。

在我看来，你是正确的思维是JavaScript的解决方案可能是最努力和最安全的方法，如果你不介意的页面权重开销，它包括一个或多个库和/或插件很高兴与的非JS回落<select>不找这么漂亮。

在众多的<select>更换jQuery插件可用，我强烈建议选择2插件 。它有一个已经支持添加占位符文本可以相应样式的控制丰富的功能集。

Answer 6:

使用这个CSS

select { font-style: italic;   }

select option  {
  font-style: normal;  
}

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

实例的jsfiddle
但不幸的是这种风格的Firefox只适用

Answer 7:

并非所有的浏览器都支持内HTML标签<option>标签。

文章来源: List Box Style in a particular item (option) HTML