Search code examples
htmlcssdrop-down-menu

How to style the option of an HTML select element?

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.

Solution

  • 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.