Opción en cursiva

Question

¿Hay alguna forma de navegador cruzado para poner en cursiva select options?
Con el siguiente CSS y HTML, FireFox muestra la segunda opción en cursiva, pero no la tercera.
Ninguna de las opciones está en cursiva en IE 7 o Safari.

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

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

¿Estoy en lo correcto al asumir que esto no es posible?

Answer 1

Esta página tiene un buen plan de soporte de los navegadores de styling de selección, opción y optgroup: http://www.electrictoolbox.com/style-select-optgroup-options-css/

De acuerdo con esto, el estilo como la única opción que es multi-navegador es color.

Answer 2

@MikeWWyatt

Sé que ha sido un tiempo ya que lo preguntas, pero he creado este:

1. Wrap en un párrafo que es position: relative
2. Crear un elemento que es la posición absoluta
3. Haga que su opción sea del mismo color que su color de fondo seleccionado
4. Use jQuery para cambiar la opción de color a blanco (o el color que desee) utilizando .change (), Así como ocultar el código 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; 
} 

Aquí está un violín si está interesado: https://jsfiddle.net/ej34bea0/