1

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

当一个有一个列表框（或组合框）时，我的第一个元素（比如“选择一个”）应该有一个特定的样式。

使用此（测试）代码：

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

谢谢。

4

7 回答 7

2

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

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

并且段落标签不属于<option>标签内部，它们应该包含纯文本。

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

于 2012-09-17T11:39:23.013 回答
2

表单元素的样式是出了名的难，而且很多元素几乎不可能在浏览器和操作系统之间保持一致。我的方法一直是使用 javascript（通常是 jQuery）隐藏表单元素，并使用 div 和 spans 构造类似的东西。这样，就造型而言，天空是极限。

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

于 2012-09-17T11:40:04.400 回答
2

从 HTML4 开始，anOPTION只能包含 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 元素。（……直到我读到这个问题……）

于 2012-09-17T11:46:15.203 回答
1

使用这个 CSS

select { font-style: italic;   }

select option  {
  font-style: normal;  
}

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

Example jsFiddle
但不幸的是，这种风格只适用于 Firefox

于 2012-09-17T11:41:11.980 回答
1

正如其他人已经指出的那样，标记是无效的，并且在浏览器之间获得一致的原生表单控件的规模介于非常困难和不可能之间。

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

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

于 2012-09-17T11:52:06.000 回答
1

斜体不适用于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;
}
于 2012-09-17T12:07:44.890 回答
0

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

于 2012-09-17T11:36:32.570 回答