Option en italique

Est-il de la croix-navigateur de façon à mettre en italique select options?
À la suite de la CSS et de l'HTML, FireFox affiche la deuxième option en italique, mais pas le troisième.
Aucune de ces options ne sont en italique dans IE 7 ou Safari.

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

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

Ai-je raison de supposer que ce n'est pas possible?

source d'informationauteur MikeWyatt

  1. 12

    Cette page a un beau tableau de prise en charge du navigateur de style select, option et de "optgroup": http://www.electrictoolbox.com/style-select-optgroup-options-css/

    Selon que, comme la seule option style de la croix-navigateur est color.

  2. 0

    @MikeWWyatt

    Je sais, ça fait un moment depuis que vous avez demandé, mais j'ai créé ce:

    1. Envelopper dans un paragraphe qui est en position relative
    2. Créer un élément en position absolue
    3. Votre option de la même couleur que votre sélectionnez la couleur d'arrière-plan
    4. Utiliser jQuery pour modifier l'option de couleur blanc (ou quelle que soit la couleur que vous voulez) à l'aide de .modifier() ainsi que de masquer la

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

    Ici un violon si vous êtes intéressé: https://jsfiddle.net/ej34bea0/