How to style the option of a html “select”?

Question

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 1

EDIT: I found this awesome library that replaces the standard "select" element in HTML with awesomely styled "select" elements: Select2 - https://select2.github.io/examples.html

---

In 2011 you may have not been able to style the select "option" element, but it's 2015! You can totally style it! I don't understand some of the answers from 2014 saying you can't style it! CSS3 works wonders. I tried this in my own code, and the pull down "options" were styled just like how you would style the "select"

http://cssdeck.com/labs/styling-select-box-with-css3

Here's some example code!

select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: black;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

Answer 2

Like stated above, not really possible; however, if you just want to style the initial state for something like a 'Select Product...' option before a user interacts with the field, you could do something like below --

The below example styles (technically all) the first option red and once a user interacts will remove that option (which has the value="defaultValue" set) and remove the class applied to the select. You can apply other options besides color as well, but they will only affect the field once changed, not the list view.

CSS

.default-value{
  color: red;
}

jQuery

$("select").addClass('default-value');

$("select").bind("focus", function () {
  $(this).children('option[value="defaultValue"]').remove();
  $(this).removeClass('default-value');
});

Answer 3

As already mentioned, the only way is to use a plugin that replaces <select> functionality.

A list of jQuery plugins: http://plugins.jquery.com/tag/select/

Take a look at the example using Select2 plugin: http://jsfiddle.net/swsLokfj/23/

Answer 4

You can style the option elements to some extent.

Using the * CSS tag you can style the options inside the box that is drawn by the system.

Example:

#ddlProducts *
{
 border-radius:15px;
 background-color:red;
}

That will look like this:

Answer 5

Some properties can be styled for<option> tag:

• font-family
• color
• font-*
• background-color

Also you can use custom font for individual <option> tag, for example any google font, Material Icons or other icon fonts from icomoon or alike. (That may come handy for font selectors etc.)

Considering that, you can create font-family stack and insert icons in <option> tags, eg.

    <select>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">a    ★★★</option>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">b    ★★★★</option>
    </select>

where ★ is taken from Icons and the rest is from Roboto.

Note though that custom fonts do not work for mobile select.

Answer 6

Seems like I can just set the CSS for the select in Chrome directly. CSS and HTML code provided below :

.boldoption {
	font-weight: bold;
}

<select>
	<option>Some normal-font option</option>
	<option>Another normal-font option</option>
	<option class="boldoption">Some bold option</option>
</select>