How to style the option of an html "select" element?

html css drop-down-menu
MrClan picture MrClan · Aug 26, 2011 · Viewed 664.1k times · Source

Here's my HTML: 

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

I want 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 an old question that mentioned it's not possible using HTML and CSS, but hopefully, there's a solution now.

Answer

Diodeus - James MacFarlane picture Diodeus - James MacFarlane · Aug 26, 2011

There are only a few style attributes that can be applied to an <option> element.

This is because this type of element is an example of a "replaced element". They are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.

There are replacement plug-ins/libraries that look like a <select> but are actually composed of regular HTML elements that CAN be styled.

Related questions

How to remove the default arrow icon from a dropdown list (select element)?

I want to remove the dropdown arrow from a HTML <select> element. For example: <select style="width:30px;-webkit-appearance: none;"> <option>2000</option> <option>2001</option> <option>2002</…

Read More
How can change width of dropdown list?

I have a listbox and I want to decrease its width. Here is my code: <select name="wgtmsr" id="wgtmsr" style="width: 50px;"> <option value="kg">Kg</option> <option value="gm">Gm&…

Read More
Change Select List Option background colour on hover

Is it possible to change the default background color of a select list option on hover? HTML: <select id="select"> <option value="1">One</option> <option value="2">Two</option> <option …

Read More