Internet Explorer: drop down does not display option font family

Question

#select-arial { font-family: Arial; }
#select-verdana { font-family: Verdana; }
#select-geneva { font-family: Geneva; }
#select-sans-serif { font-family: Sans-Serif; }
#select-courier { font-family: Courier; }
#select-monospace { font-family: Monospace; }
#select-georgia { font-family: Georgia; }

    <select name="font_select">
        <option id="select-arial" value="Arial">Arial</option>
        <option id="select-verdana" value="Verdana">Verdana</option>
        <option id="select-geneva" value="Geneva">Geneva</option>
        <option id="select-sans-serif" value="Sans-Serif">Sans-Serif</option>
        <option id="select-courier" value="Courier">Courier</option>
        <option id="select-monospace" value="Monospace">Monospace</option>
        <option id="select-georgia" value="Georgia">Georgia</option>
    </select>

Internet explorer does not display different fonts, while Firefox and safari does. Does any know a work around?

Thank you

Answer 1

Some form elements can't be styled in IE - the only option I see is to create your own controls, via DHTML / JS

Something like this: http://v2.easy-designs.net/articles/replaceSelect/