Option in italics

Is there any cross-browser way to italicize select options?

With the following CSS and HTML, FireFox shows the second option in italics, but not the third.

None of th开发者_如何学Ce options are italicized in IE 7 or Safari.

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

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

Am I correct in assuming this is not possible?

This page has a nice chart of browser support of styling select, option and optgroup: http://www.electrictoolbox.com/style-select-optgroup-options-css/

According to that, the like the only option style that's cross-browser is color.

@MikeWWyatt

I know it's been a while since you asked, but I created this:

1. Wrap in a paragraph that is position:relative
2. Create a element that is position absolute
3. Have your option be the same color as your select background color
4. Use jQuery to change the option color to white (or whatever color you want) using .change() as well as hide the

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

Here's a fiddle if you're interested: https://jsfiddle.net/ej34bea0/