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

81
February 02, 2019, at 12:30 PM

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

In general, you can't. This element is and example of a "replaced element", these 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.

Answer 2

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.

Answer 3

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 4

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

html

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

css

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 {
    background-color:#39f;
    color:white;
}

JS

// 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 = $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 = $('<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)
    $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();
    });
});
Answer 5

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

Answer 7

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 8

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>

Example: https://silviomoreto.github.io/bootstrap-select/examples/

Answer 9

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 {font-size:2rem;cursor:pointer}
<span onclick="toggleSelect()">⮋</span> 
 <div id="store" class="hidden"> 
  
<ul><li><a href="#keylogger">keylogger</a></li><li><a href="#1526269343113">1526269343113</a></li><li><a href="#slow">slow</a></li><li><a href="#slow2">slow2</a></li><li><a href="#Benchmark">Benchmark</a></li><li><a href="#modal">modal</a></li><li><a href="#buma">buma</a></li><li><a href="#1526099371108">1526099371108</a></li><a href="#1526099371108o">1526099371108o</a></li><li><a href="#pwnClrB">pwnClrB</a></li><li><a href="#stars%20u">stars%20u</a></li><li><a href="#pwnClrC">pwnClrC</a></li><li><a href="#stars ">stars </a></li><li><a href="#wello">wello</a></li><li><a href="#equalizer">equalizer</a></li><li><a href="#pwnClrA">pwnClrA</a></li></ul> 
  
 </div>

Answer 10

This element is rendered by the OS, not HTML. It cannot be styled via CSS.

	$(function() { 
    var clicky; 
    var t=0; 
    $(document).mousedown(function(e) { 
        clicky = $(e.target); 
    }); 
    $(document).mouseup(function(e) { 
        clicky = null; 
    }); 
 
    $("select").focusout(function(e) { 
        if (typeof clicky.attr('id') !== typeof undefined && clicky.attr('id') !== false) { 
        	$(this).parents().children("span.selected").html(clicky.html()); 
        	$(this).children('option[value="'+clicky.attr('id')+'"]').prop('selected', true); 
		} 
         
        $(this).parents().children("span.lists").html(''); 
         
 
    }); 
    $('select > option').text(function(i, text) { 
				var attr = $(this).attr('selected'); 
				if (typeof attr !== typeof undefined && attr !== false) { 
        				$(this).parents().parents().children("span.selected").html(text); 
				} 
	}); 
 
		$("select").focusin(function(){ 
			$(this).children('option').text(function(i, text) { 
    			$(this).parents().children("span.lists").append("<span class='item' id='"+$(this).attr('value')+"'>"+text+"</span>"); 
				}); 
		}); 
 
	});
select { 
  width: 0px; 
  height: 0px; 
  overflow:hidden; 
  outline: none; 
  border: none; 
  appearance:none; 
  -moz-appearance: none; 
 
} 
label{ 
	display: inline-block; 
	padding: 5px 10px; 
	position: relative; 
	width: 100px; 
	height: 20px; 
	background-color:#ccc; 
 
} 
label .selected{ 
	display: inline-block; 
	overflow: hidden; 
	width: 100%; 
	height: 100%; 
} 
label span.lists{ 
	width: 100%; 
	display: inline-block; 
	position: absolute; 
	top: 100%; 
	left: 0px; 
	box-shadow: 0px 0px 2px 0px #ccc; 
	background-color:#fff; 
	z-index: 9; 
} 
label span.item{ 
	display: inline-block; 
	width: 100%; 
	border-bottom: 1px solid #ccc; 
}
<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
</head> 
<body> 
	<form action="?" method="GET"> 
	<label><span class="selected">select..</span> <span class="lists"></span> 
	<select name="test"> 
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option> 
		<option value="2" selected>item 2</option> 
		<option value="3">item 3</option> 
		<option value="4">item 4</option> 
	</select> 
	</label><br> 
	<label><span class="selected">select..</span> <span class="lists"></span> 
	<select name="test2"> 
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option> 
		<option value="2">item 2</option> 
		<option value="3" selected>item 3</option> 
		<option value="4">item 4</option> 
	</select> 
	</label><br> 
	<button>Submit</button> 
</form> 
 
</body> 
</html>

try this it may help you

[ https://codepen.io/venu9l/pen/jeNXzY][1]
Answer 11

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 12

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

<option class="attached" disabled>color 1</option>
<option class="attached" disabled>color 2</option>

It took a little logic, but here is how I targeted the disabled select options.

CSS

table.variations td.value select#pa_color option.attached:disabled {
display: none !important;
}

With that, my color options are only visible to wholesale customers.

Answer 13

It's 100% work, basically the select option is rendered by os not by html. That's by the CSS style doesn't effect,.. generally option{font-size : value ; background-color:color code; border-radius:value; } this case work, but we can't customize the padding ,margin etc.. Below code 100% work to customize select tag

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 { 
  background-color: rgba(0, 0, 0, 0.1); 
}
<div class="custom-select" style="width:200px;"> 
  <select> 
    <option value="0">Select car:</option> 
    <option value="1">Audi</option> 
    <option value="2">BMW</option> 
    <option value="3">Citroen</option> 
    <option value="4">Ford</option> 
    <option value="5">Honda</option> 
    <option value="6">Jaguar</option> 
    <option value="7">Land Rover</option> 
    <option value="8">Mercedes</option> 
    <option value="9">Mini</option> 
    <option value="10">Nissan</option> 
    <option value="11">Toyota</option> 
    <option value="12">Volvo</option> 
  </select> 
</div>

Answer 14

You can add a class and gives font-weight:700; in option. But by using this all the text will become bold.

Answer 15

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{ 
    display:inline; 
}

Answer 16

You can use inline styles to add custome styling to <option> tags.

For eg : <option style="font-weight:bold;color:#09C;">Option 1</option> This will apply the styles to this particular <option> element only.

Then you can use a bit of javascript magic to apply the inline styles to all of the <option> elements within a <select> tag like so :

var select = $(document).getElementById('#select-element-id')

var option = select.children('#option-element-id')

option.css('font-weight', 'bold')

option.css('font-size', '24px')

You can also use <option value="" disabled> <br> </option> to add a line-break between the options.

Answer 17

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');
});
READ ALSO
What is the scope of PHP set_time_limit()?

What is the scope of PHP set_time_limit()?

I still don't fully understand how set_time_limit() works, and the documentation didn't say anything about scopeLets say I have the following code:

54
When I get the file from s3 bucket, i can download in html page, but unable to view the pdf file

When I get the file from s3 bucket, i can download in html page, but unable to view the pdf file

I want to view the pdf file from S3 bucket in html using iframe/embed tagAnd the answer is :

43
Laravel friendship package [on hold]

Laravel friendship package [on hold]

can any one please confirm is this package friendship package by hootlex is good for friendship structure like instagram? Is it bug free?

58
Get value of key in nth level multidimensional array PHP

Get value of key in nth level multidimensional array PHP

I have a array with n depthi have tried this but its not working for me

42