Opcja kursywą

Question

Czy jest jakikolwiek sposób przechylenia kursora na inną przeglądarkę select options?
Za pomocą następujących CSS i HTML, FireFox pokazuje drugą opcję kursywą, ale nie trzecią.
Żadna z opcji nie jest zaznaczona kursywą w IE 7 lub Safari.

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

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

Czy mam rację, zakładając, że nie jest to możliwe?

Answer 1

Ta strona ma ładny wykres wsparcia przeglądarki stylizacji, wybierz opcję i optgroup: http://www.electrictoolbox.com/style-select-optgroup-options-css/

Zgodnie z tym, jak jedyna opcja stylu, który jest cross-browser jest color.

Answer 2

@MikeWWyatt

wiem, minęło trochę czasu, skoro pytasz, ale stworzyłem ten:

1. owijane w akapicie, który jest position: relative
2. Utwórz element, który jest pozycja absolutna
3. Masz opcję, która ma ten sam kolor co wybrany kolor tła
4. Użyj jQuery, aby zmienić kolor opcji na biały (lub dowolny inny kolor) przy użyciu .change (), A także ukryć

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

Oto skrzypce jeśli jesteś zainteresowany: https://jsfiddle.net/ej34bea0/