How to style the options of the HTML "select" element?

Question

This is my HTML code:

<select id="ddlProducts" name="ddProducts">
    <option>Product 1: Electronic products</option>
    <option>Product 2: Sporting Goods</option>
</select>

I want to bold the product names (i.e. 'Product 1', 'Product 2', etc.) and italicize their categories (i.e. Electronics, Sporting Goods, etc.) using CSS. I found an old question mentioning that it's not possible using HTML and CSS, but hopefully there is a solution now.

Answer 1

No, this is not possible because the styling of these elements is handled by the user's operating system. MSDN will answer your questions here:

Answer 2

Only a few style attributes can be applied to <option> elements.

This is because this type of element is an example of a "replacement element". They are operating system dependent and not part of HTML/browser. It cannot be styled via CSS.

There are alternative plugins/libraries that look like <select>, but are actually made of regular HTML elements that can be styled.