MrClan MrClan - 21 days ago 6
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>
</select>


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.

Answer

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.