Опция курсивом

Есть ли способ перекрестного браузера для выделения курсивом 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>

Правильно ли я предполагаю, что это невозможно?

Ответы

Ответ 1

На этой странице есть хорошая схема поддержки браузера для выбора стиля, опции и optgroup: http://www.electrictoolbox.com/style-select-optgroup-options-css/

В соответствии с этим, подобный стиль единственного варианта, что кросс-браузер - color.

Ответ 2

@MikeWWyatt

Я знаю, что прошло некоторое время с тех пор, как вы спросили, но я создал это:

  • Обтекание абзацем, который является позицией: relative
  • Создать элемент, который является абсолютным положением
  • У вас есть тот же цвет, что и цвет вашего выбранного фона
  • Используйте 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/