斜体选项

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

此页面有一个很好的浏览器支持样式选择，选项和选择组的图表：http://www.electrictoolbox.com/style-select-optgroup-options-css/

根据它，类似跨浏览器的唯一选项样式是color。

Answer 2

@MikeWWyatt

我知道自从你提问以来已经有一段时间了，但我创造了这个：

1. 包含位置：relative
的段落
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/