Вариант курсивом

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

На этой странице есть хорошая диаграмма поддержки браузером стилей select, option и 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/