Agfdhyk

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.

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:

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();

    });



});

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;

}

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>

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/

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/

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>

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]

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.

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.

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.

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>

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

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;

}