MrClan MrClan - 7 months ago 39
CSS Question

How to style the option of a html "select"?

Here's my html :

<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>

Now, what I want is to make the name of the product (i.e. 'Product1', 'Product2' , etc) bold, and its categories(viz. Electronics, Sports, etc) italicized, using css only. I found a similar question about an year old, but as mentioned there, it's just not possible using HTML and CSS. Hopefully, there's a solution now. Any hint, quirk or trick would be appreciated. Thanks.


In general, you can't. This element is rendered by the OS, not HTML. It cannot be styled via CSS. There are replacement plug-ins that look like a SELECT, but are actually composed from regular HTML elements that CAN be styled.