斜體字選項

Question

是否有任何跨瀏覽器的方式來表示select options？
使用以下CSS和HTML，FireFox以斜體顯示第二個選項，但不顯示第三個選項。
在IE 7或Safari中，所有選項都不以斜體顯示。

<style> 
    option.bravo 
    { 
     font-style: italic; 
    } 
</style> 

<select> 
    <option>Alpha</option> 
    <option class="bravo">Bravo</option> 
    <option><i>Charlie</i></option> 
<select> 

我正確地認爲這是不可能的嗎？

Answer 1

這個頁面有瀏覽器支持的造型選擇，選項和OPTGROUP的一個很好的圖表：http://www.electrictoolbox.com/style-select-optgroup-options-css/

根據的是，類似的唯一選擇風格，是跨瀏覽器是color。

Answer 2

@MikeWWyatt

我知道它已經有一段時間，因爲你問過，但我創造這樣的：在一個段落是位置

1. 後餘音：相對
2. 創建一個元素是絕對位置
3. 可以選擇與選定背景顏色相同的顏色
4. 使用jQuery將選項顏色更改爲白色（或任何您想要的顏色）使用.change（ ）以及隱藏

HTML

<p>I am a: <span class='pretend-option'>Please choose one</span> 

    <select name="example"> 
     <option disabled="disabled" selected="selected">Please choose one</option> 
     <option value="consumer">Consumer</option> 
     <option value="supplier">Supplier</option> 
     <option value="retailer">Retailer</option> 
    </select> 
</p> 

jQuery的

 $('select').change(function() { 
      $(this).css('color', 'white'); 
      $(this).parent('p').children('.pretend-option').css('z-index', -1); 
    }); 

CSS

select, option { 
     -webkit-appearance: none; 
     -webkit-border-radius: 0px; 
     border-radius: 0; 
     display: block; 
    } 
    p { 
     position: relative; 
    } 
    select { 
     padding: 7px; 
     background-color: blue; 
     color: blue; 
    } 
    .pretend-option { 
     position: absolute; 
     bottom: 0.5em; 
     color: #fff; 
     left: 0.5em; 
     pointer-events: none; 
     z-index: 1; 
     font-style: italic; 
} 

這裏如果你有興趣小提琴：https://jsfiddle.net/ej34bea0/