特定项目(选项)HTML 中的列表框样式

2022-01-16 00:00:00 listbox html css combobox

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

I'm trying to make this behavior.

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

When a have a listBox (or comboBox), my first element (something like "choose one") should have a particular style.

使用这个(测试)代码:

With this (test) code:

<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 中看不到)上看到这种行为，但是当我选择选择一个"时，我的字段没有(斜体)样式.

i can see this behavior on Firefox (but not in Chrome) when i expand my listBox but when i select my 'Choose one' my field doesn't have the (italic) style.

我该怎么做?是否可以仅使用 HTML、CSS 或我需要更多(如 jQuery)来做到这一点?

How can i do this? Is possible do this only with HTML, CSS or i need more (like jQuery)?

谢谢.

推荐答案

斜体不适用于chrome和opera.请检查 http://www.electrictoolbox.com/style-select-optgroup-options-css/

italic is not apply in chrome and opera. plz check http://www.electrictoolbox.com/style-select-optgroup-options-css/

我们可以为选项提供任何设计.

we can give any design for options.

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

相关文章