問題描述

我正在嘗試做出這種行為.

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

這篇關于特定項目(選項)HTML 中的列表框樣式的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！