How to style the option of a html "select"?

  • Added:
  • |
  • In: Wordpress

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.

This Question Has 11 Answeres | Orginal Question | MrClan

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.


.default-value{ color: red; } 


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

Bootstrap allows you to use styling via data-content:

<select class="selectpicker"> <option data-content="<span class='label label-success'>Relish</span>">Relish</option> </select> 


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.


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

That will look like this:

enter image description here

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

A list of jQuery plugins:

Take a look at the example using Select2 plugin:

A standard select can't be styled, but take a look at something like this.

Naturally, it requires JavaScript be enabled on the client browser. There are others like it as well (probably many). There may also be some HTML/CSS tricks that don't require JavaScript, but I've yet to come across one.

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.

Works for me.

<html> <head> <style type="text/css"> .boldoption { font-weight: bold; } </style> </head> <body> <select> <option class="boldoption">Some bold option.</option> <option>Some normal-font option.</option> </select> </body> </html> 

No, it's not possible, as the styling for these elements is handled by the user's OS. MSDN will answer your question here:

Except for background-color and color, style settings applied through the style object for the option element are ignored.

EDIT: I found this awesome library that replaces the standard "select" element in HTML with awesomely styled "select" elements: Select2 -

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"

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; } 

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.

I found and using this good example of styling the selects and options.You can do with this select all you want.Here is the Fiddle


<select id="selectbox1"> <option value="">Select an option&hellip;</option> <option value="aye">Aye</option> <option value="eh">Eh</option> <option value="ooh">Ooh</option> <option value="whoop">Whoop</option> </select> <select id="selectbox2"> <option value="">Month&hellip;</option> <option value="january">January</option> <option value="february">February</option> <option value="march">March</option> <option value="april">April</option> <option value="may">May</option> <option value="june">June</option> <option value="july">July</option> <option value="august">August</option> <option value="september">September</option> <option value="october">October</option> <option value="november">November</option> <option value="december">December</option> </select> 


body { padding:50px; background-color:white; } .s-hidden { visibility:hidden; padding-right:10px; } .select { cursor:pointer; display:inline-block; position:relative; font:normal 11px/22px Arial, Sans-Serif; color:black; border:1px solid #ccc; } .styledSelect { position:absolute; top:0; right:0; bottom:0; left:0; background-color:white; padding:0 10px; font-weight:bold; } .styledSelect:after { content:""; width:0; height:0; border:5px solid transparent; border-color:black transparent transparent transparent; position:absolute; top:9px; right:6px; } .styledSelect:active, { background-color:#eee; } .options { display:none; position:absolute; top:100%; right:0; left:0; z-index:999; margin:0 0; padding:0 0; list-style:none; border:1px solid #ccc; background-color:white; -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2); box-shadow:0 1px 2px rgba(0, 0, 0, 0.2); } .options li { padding:0 6px; margin:0 0; padding:0 10px; } .options li:hover { background-color:#39f; color:white; } 


// Iterate over each select element $('select').each(function () { // Cache the number of options var $this = $(this), numberOfOptions = $(this).children('option').length; // Hides the select element $this.addClass('s-hidden'); // Wrap the select element in a div $this.wrap('<div class="select"></div>'); // Insert a styled div to sit over the top of the hidden select element $this.after('<div class="styledSelect"></div>'); // Cache the styled div var $styledSelect = $'div.styledSelect'); // Show the first select option in the styled div $styledSelect.text($this.children('option').eq(0).text()); // Insert an unordered list after the styled div and also cache the list var $list = $('<ul />', { 'class': 'options' }).insertAfter($styledSelect); // Insert a list item into the unordered list for each select option for (var i = 0; i < numberOfOptions; i++) { $('<li />', { text: $this.children('option').eq(i).text(), rel: $this.children('option').eq(i).val() }).appendTo($list); } // Cache the list items var $listItems = $list.children('li'); // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again) $ (e) { e.stopPropagation(); $('').each(function () { $(this).removeClass('active').next('ul.options').hide(); }); $(this).toggleClass('active').next('ul.options').toggle(); }); // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item // Updates the select element to have the value of the equivalent option $ (e) { e.stopPropagation(); $styledSelect.text($(this).text()).removeClass('active'); $this.val($(this).attr('rel')); $list.hide(); /* alert($this.val()); Uncomment this for demonstration! */ }); // Hides the unordered list when clicking outside of it $(document).click(function () { $styledSelect.removeClass('active'); $list.hide(); }); }); 

I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

Connect Social With PHPAns