Option in Kursivschrift

Question

Gibt es einen browserübergreifenden Weg zur Kursivschrift select options?
Mit dem folgenden CSS und HTML zeigt FireFox die zweite Option in Kursivschrift, aber nicht die dritte.
Keine der Optionen ist kursiv in IE 7 oder Safari.

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

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

Bin ich richtig in der Annahme, dass dies nicht möglich ist?

Answer 1

Diese Seite hat eine schöne Grafik von Browser-Unterstützung von Styling wählen, Option und optgroup: http://www.electrictoolbox.com/style-select-optgroup-options-css/

dass Laut, der wie die einzige Option Stil, der Cross-Browser ist, ist color.

Answer 2

@MikeWWyatt

Ich weiß, dass es eine Weile her, seit Sie gefragt, aber ich schaffte diesen:

1. Wrap in einem Absatz, Position: relativer
2. ein Element erstellen, die Position absolut ist
3. Wählen Sie die gleiche Farbe wie die ausgewählte Hintergrundfarbe
4. Verwenden Sie jQuery, um die Optionsfarbe mithilfe von .change in Weiß (oder in der gewünschten Farbe) zu ändern.) Sowie verstecken ist die

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; 
} 

Hier eine Geige wenn Sie interessiert sind: https://jsfiddle.net/ej34bea0/