How to style the option of an html «select» element?
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.
Not sure about this one. By I think not. You’ll need some JavaScript (jQuery) magic for that to happen.
options are still just as annoying to style as they have ever been. what you may want to use is an optgroup: htmlhelp.com/reference/html40/forms/optgroup.html this will give you a bold and italicized category (like Electronics) under which a bunch of options fall.
23 Answers 23
There are only a few style attributes that can be applied to an 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 but are actually composed of regular HTML elements that CAN be styled.
This behaviour varies across different browsers and different OSes; it’s worth clarifying if you’re talking mainly about IE on Windows.
You can style select > option , but there are no reliable crossbrowser solution for doing so and, on chrome at least you can at most customize font size, family, background and foreground color. Maybe some more tweaks, but things as padding, hover color and such I couldn’t succeed on changing. Indeed there might be alternatives, but depending on the project the
@none I have posted an answer to Styling option tags. It does not show how to style , but it does show how to emulate so you can style the options.
In the introduction of mobile devices, this is even less styleable, as the options elements are not even displayed in relation to the select in the page flow — it is listed in a separate scrollable section at the bottom of the screen — styled very differently than how you expect in a traditional browser.
Cannot be styled for sure (only minor things to options). Please take a look at this how-to from the guys at w3schools to completely customize it with only JS: w3schools.com/howto/howto_custom_select.asp so you can
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.
To add to devios’s point — the native select can be minimally styled for Windows, but not necessarily for other OSes. As pumbo mentions below, you’ll need to swap out the select for other elements (usually an ul) and duplicate select functionality in JavaScript for full control over styles.
style=»background-color: red;color: red;» does not work for me. EDIT: After closing the developer console the style was applied.
You can style the option elements to some extent.
Using the * CSS selector you can style the options inside the box that is drawn by the system.
That is true only because the all selector targets the shadow DOM innards, you can target those manually per browser.
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
// 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(' '); // Insert a styled div to sit over the top of the hidden select element $this.after(' '); // Cache the styled div var $styledSelect = $this.next('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 = $('', < 'class': 'options' >).insertAfter($styledSelect); // Insert a list item into the unordered list for each select option for (var i = 0; i < numberOfOptions; i++) < $('', < 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) $styledSelect.click(function(e) < e.stopPropagation(); $('div.styledSelect.active').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 $listItems.click(function(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(); >); >);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, .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
could you please post the code here because maybe some day it will be removed but here it will be stay in the save place
It is very dynamic way of doing what you want with the select, if you will have a better option i will be happy to see it as an answer here @ahnbizcad
This is NOT a native html it just re-renders one with some jQuery code. If your gonna do this might as well use a jQuery plugin, React component etc. that handles keyboard UP/DOWN, typeahead/searching etc.
Wow. What a lot of work to compensate for the wrong decision to make the OS responsible for Option elements, even if it works.
Here’s some ways to style along with the if you’re using Bootstrap and/or jquery. I understand this isn’t what the original poster is asking but I thought I could help others that stumble onto this question.
You can still achieve the goal of styling each separately, but may need to apply some style to the as well. My favorite is the «Bootstrap Select» library mentioned below.
Bootstrap Select Library (jquery)
If you’re already using bootstrap, you can try the Bootstrap Select library or the library below (since it has a bootstrap theme).
Note that you are able to style the entire select element, or the option elements separately.
Dependencies: requires jQuery v1.9.1+, Bootstrap, Bootstrap’s dropdown.js component, and Bootstrap’s CSS
Compatibility: Unsure, but bootstrap says it «supports the latest, stable releases of all major browsers and platforms»
Select2 (JS lib)
There’s a library you can use called Select2.
Dependencies: Library is JS + CSS + HTML only (does not require JQuery).
Compatibility: IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+
MDBootstrap ($ & Bootstrap & JQuery)
If you have extra money, you can use a premium library MDBootstrap. (This is an entire UI Kit, so it’s not light)
This allows you to style your select and option elements using the Material design.
There is a free version, but it won’t allow you to use the pretty Material design!
Dependencies: Bootstrap 4, JQuery,
This answer is misleading, because while you explicitly show that you can style the select, you claim that the option is what can be styled, even though it’s an OS element that only accepts minimal CSS styling at all.
Seems like I can just set the CSS for the select in Chrome or Firefox directly. CSS and HTML code provided below :
@Muhamed Al Khalil: I updated the example to be more clear, since the currently selected option has its own style, too. If that doesn’t work, I suspect browser compatibility issues, then. =\
@Akash: Interesting, this worked on Firefox before they released Firefox Quantum, and it still currently works on Chrome (60%+ of users). I bet it’s a bug!
@WebDude0482 if you want what’s displayed as selected to be bold too you can do select, option:checked < font-weight: bold; >
Some properties can be styled for tag:
Also you can use custom font for individual 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 tags, eg.
where ★ is taken from Icons and the rest is from Roboto .
Note though that custom fonts do not work for mobile select.
As already mentioned, the only way is to use a plugin that replaces functionality.
Take a look at the example using Select2 plugin: http://jsfiddle.net/swsLokfj/23/
Actually you can add :before and :after and style those. At least it’s something
option < font-size: 18px; background-color: #ffffff; >option:before < content: ">"; font-size: 20px; display: none; padding-right: 10px; padding-left: 5px; color: #fff; > option:hover:before
Bootstrap allows you to use styling via data-content:
Even if there aren’t much properties to change, but you can achieve following style only with css:
Is this what youre looking for? I did it with jQuery!
$(".custom-select").each(function() < var classes = $(this).attr("class"), name = $(this).attr("name"); var template = ''; template += '' + $(this).attr("placeholder") + ''; template += ''; $(this).find("option").each(function() < template += '' + $(this).html() + ''; >); template += ''; $(this).wrap(' '); $(this).hide(); $(this).after(template); >); $(".custom-option:first-of-type").hover(function() < $(this).parents(".custom-options").addClass("option-hover"); >, function() < $(this).parents(".custom-options").removeClass("option-hover"); >); $(".custom-select-trigger").on("click", function() < $('html').one('click',function() < $(".custom-select").removeClass("opened"); >); $(this).parents(".custom-select").toggleClass("opened"); event.stopPropagation(); >); $(".custom-option").on("click", function() < $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value")); $(this).parents(".custom-options").find(".custom-option").removeClass("selection"); $(this).addClass("selection"); $(this).parents(".custom-select").removeClass("opened"); $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text()); >);body < font-family: 'Roboto', sans-serif; >.custom-select-wrapper < position: relative; display: inline-block; user-select: none; >.custom-select-wrapper select < display: none; >.custom-select < position: relative; display: inline-block; >.custom-select-trigger < position: relative; display: block; width: 170px; padding: 0 84px 0 22px; font-size: 19px; font-weight: 300; color: #5f5f5f; line-height: 50px; background: #EAEAEA; border-radius: 4px; cursor: pointer; margin-left:20px; border: 1px solid #5f5f5f; transition: all 0.3s; >.custom-select-trigger:hover < background-color: #d9d9d9; transition: all 0.3s; >.custom-select-trigger:after < position: absolute; display: block; content: ''; width: 10px; height: 10px; top: 50%; right: 25px; margin-top: -3px; border-bottom: 1px solid #5f5f5f; border-right: 1px solid #5f5f5f; transform: rotate(45deg) translateY(-50%); transition: all 0.4s ease-in-out; transform-origin: 50% 0; >.custom-select.opened .custom-select-trigger:after < margin-top: 3px; transform: rotate(-135deg) translateY(-50%); >.custom-options < position: absolute; display: block; top: 100%; left: 0; right: 0; margin: 15px 0; border: 1px solid #b5b5b5; border-radius: 4px; box-sizing: border-box; box-shadow: 0 2px 1px rgba(0,0,0,.07); background: #fff; transition: all 0.4s ease-in-out; margin-left: 20px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-15px); >.custom-select.opened .custom-options < opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0); >.custom-options:before < position: absolute; display: block; content: ''; bottom: 100%; right: 25px; width: 7px; height: 7px; margin-bottom: -4px; border-top: 1px solid #b5b5b5; border-left: 1px solid #b5b5b5; background: #fff; transform: rotate(45deg); transition: all 0.4s ease-in-out; >.option-hover:before < background: #f9f9f9; >.custom-option < position: relative; display: block; padding: 0 22px; border-bottom: 1px solid #b5b5b5; font-size: 18px; font-weight: 600; color: #b5b5b5; line-height: 47px; cursor: pointer; transition: all 0.15s ease-in-out; >.custom-option:first-of-type < border-radius: 4px 4px 0 0; >.custom-option:last-of-type < border-bottom: 0; border-radius: 0 0 4px 4px; >.custom-option:hover, .custom-option.selection
It’s 2017 and it IS possible to target specific select options. In my project I have a table with a class=»variations», and the select options are in the table cell td=»value», and the select has an ID select#pa_color. The option element also has a class option=»attached» (among other class tags). If a user is logged in as a wholesale customer, they can see all of the color options. But retail customers are not allowed to purchase 2 color options, so I’ve disabled them
It took a little logic, but here is how I targeted the disabled select options.
table.variations td.value select#pa_color option.attached:disabled
With that, my color options are only visible to wholesale customers.
Leaving here a quick alternative, using class toggle on a table. The behavior is very similar than a select, but can be styled with transition, filters and colors, each children individually.
function toggleSelect() < if (store.classList[0] === "hidden")< store.classList = "viewfull" >else < store.classList = "hidden" >>#store < overflow-y: scroll; max-height: 110px; max-width: 50% >.hidden < display: none >.viewfull < display: block >#store :nth-child(4) < background-color: lime; >span
You can use inline styles to add custome styling to tags.
For eg :This will apply the styles to this particular
Then you can use a bit of javascript magic to apply the inline styles to all of the elements within a tag like so :
var select = $(document).getElementById(‘#select-element-id’)
var option = select.children(‘#option-element-id’)
You can also use to add a line-break between the options.
It’s will definitely work. The select option is rendered by OS not by html. That’s whythe CSS style doesn’t effect. generally option
this will work, but we can’t customize the padding, margin etc..
Below code 100% work to customize select tag taken from this example
var x, i, j, selElmnt, a, b, c; /*look for any elements with the class "custom-select":*/ x = document.getElementsByClassName("custom-select"); for (i = 0; i < x.length; i++) < selElmnt = x[i].getElementsByTagName("select")[0]; /*for each element, create a new DIV that will act as the selected item:*/ a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); /*for each element, create a new DIV that will contain the option list:*/ b = document.createElement("DIV"); b.setAttribute("class", "select-items select-hide"); for (j = 1; j < selElmnt.length; j++) < /*for each option in the original select element, create a new DIV that will act as an option item:*/ c = document.createElement("DIV"); c.innerHTML = selElmnt.options[j].innerHTML; c.addEventListener("click", function(e) < /*when an item is clicked, update the original select box, and the selected item:*/ var y, i, k, s, h; s = this.parentNode.parentNode.getElementsByTagName("select")[0]; h = this.parentNode.previousSibling; for (i = 0; i < s.length; i++) < if (s.options[i].innerHTML == this.innerHTML) < s.selectedIndex = i; h.innerHTML = this.innerHTML; y = this.parentNode.getElementsByClassName("same-as-selected"); for (k = 0; k < y.length; k++) < y[k].removeAttribute("class"); >this.setAttribute("class", "same-as-selected"); break; > > h.click(); >); b.appendChild(c); > x[i].appendChild(b); a.addEventListener("click", function(e) < /*when the select box is clicked, close any other select boxes, and open/close the current select box:*/ e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); >); > function closeAllSelect(elmnt) < /*a function that will close all select boxes in the document, except the current select box:*/ var x, y, i, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); for (i = 0; i < y.length; i++) < if (elmnt == y[i]) < arrNo.push(i) >else < y[i].classList.remove("select-arrow-active"); >> for (i = 0; i < x.length; i++) < if (arrNo.indexOf(i)) < x[i].classList.add("select-hide"); >> > /*if the user clicks anywhere outside the select box, then close all select boxes:*/ document.addEventListener("click", closeAllSelect);/*the container must be positioned relative:*/ .custom-select < position: relative; font-family: Arial; >.custom-select select < display: none; /*hide original SELECT element:*/ >.select-selected < background-color: DodgerBlue; >/*style the arrow inside the select element:*/ .select-selected:after < position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent; >/*point the arrow upwards when the select box is open (active):*/ .select-selected.select-arrow-active:after < border-color: transparent transparent #fff transparent; top: 7px; >/*style the items (options), including the selected item:*/ .select-items div,.select-selected < color: #ffffff; padding: 8px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; >/*style items (options):*/ .select-items < position: absolute; background-color: DodgerBlue; top: 100%; left: 0; right: 0; z-index: 99; >/*hide the items when the select box is closed:*/ .select-hide < display: none; >.select-items div:hover, .same-as-selected