How to style the option of an html select element

Question

Here s my HTML     lt select id  ddlProducts  name  ddProducts  gt        lt option gt Product1   Electronics  lt  option gt       lt option gt Product2   Sports  lt  option gt   lt  select gt    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

User · Answer

Here s some ways to style  lt option gt  along with the  lt select gt  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  lt option gt  separately  but may need to apply some style to the  lt select gt  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   Examples           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   Demo  https   developer snapappointments com bootstrap-select examples    x000D   x000D   special   x000D    font-weight  bold  important  x000D    color   fff  important  x000D    background   bc0000  important  x000D    text-transform  uppercase  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet    gt  x000D   lt link href  https   cdn jsdelivr net npm bootstrap-select 1 13 9 dist css bootstrap-select min css  rel  stylesheet    gt  x000D   lt script src  https   cdn jsdelivr net npm bootstrap-select 1 13 9 dist js bootstrap-select min js  gt  lt  script gt  x000D   x000D   lt select class  selectpicker  gt  x000D     lt option gt Mustard lt  option gt  x000D     lt option class  special  gt Ketchup lt  option gt  x000D     lt option style  background   5cb85c  color   fff   gt Relish lt  option gt  x000D   lt  select gt  x000D   x000D   x000D      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   Demo  https   select2 org getting-started basic-usage  There s also a bootstrap theme available   No Bootstrap example    x000D   x000D    function     x000D    var  select       select2    x000D     x000D     select select2   x000D      theme   paper  x000D        x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs select2 4 0 7 js select2 min js  gt  lt  script gt  x000D   lt link href  https   cdnjs cloudflare com ajax libs select2 4 0 7 css select2 min css  rel  stylesheet   gt  x000D   x000D   lt select class  select2 form-control  placeholder  Country  gt  x000D     lt optgroup label  Alaskan Hawaiian Time Zone  gt  x000D       lt option value  AK  gt Alaska lt  option gt  x000D       lt option value  HI  gt Hawaii lt  option gt  x000D     lt  optgroup gt  x000D     lt optgroup label  Pacific Time Zone  gt  x000D       lt option value  CA  gt California lt  option gt  x000D       lt option value  NV  gt Nevada lt  option gt  x000D       lt option value  OR  gt Oregon lt  option gt  x000D       lt option value  WA  gt Washington lt  option gt  x000D     lt  optgroup gt  x000D   lt  select gt  x000D   x000D   x000D    Bootstrap example    x000D   x000D    function     x000D    var  select       select2    x000D     x000D     select select2   x000D      theme   paper  x000D        x000D      x000D   lt link href  https   cdnjs cloudflare com ajax libs bootswatch 3 3 2 paper bootstrap css  rel  stylesheet   gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs select2 4 0 7 js select2 min js  gt  lt  script gt  x000D   lt link href  https   cdnjs cloudflare com ajax libs select2 4 0 7 css select2 min css  rel  stylesheet   gt  x000D   x000D   lt select class  select2 form-control  placeholder  Country  gt  x000D     lt optgroup label  Alaskan Hawaiian Time Zone  gt  x000D       lt option value  AK  gt Alaska lt  option gt  x000D       lt option value  HI  gt Hawaii lt  option gt  x000D     lt  optgroup gt  x000D     lt optgroup label  Pacific Time Zone  gt  x000D       lt option value  CA  gt California lt  option gt  x000D       lt option value  NV  gt Nevada lt  option gt  x000D       lt option value  OR  gt Oregon lt  option gt  x000D       lt option value  WA  gt Washington lt  option gt  x000D     lt  optgroup gt  x000D   lt  select gt  x000D   x000D   x000D      MDBootstrap     amp  Bootstrap  amp  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    Compatibility   supports the latest  stable releases of all major browsers and platforms    Demo  https   mdbootstrap com docs jquery forms select  color

User · Answer

As already mentioned  the only way is to use a plugin that replaces  lt select gt  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

User · Answer

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

_x000D_

.boldoption {_x000D_
 font-weight: bold;_x000D_
}

_x000D_

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

_x000D_

User · Answer

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   lt option class  attached  disabled gt color 1 lt  option gt   lt option class  attached  disabled gt color 2 lt  option gt    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

User · Answer

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:

enter image description here

User · Answer

Is this what youre looking for  I did it with jQuery  Run Code Snippet  x000D   x000D      custom-select   each function         var classes     this  attr  class            id          this  attr  id            name        this  attr  name        var template      lt div class      classes      gt        template      lt span class  custom-select-trigger  gt       this  attr  placeholder       lt  span gt        template      lt div class  custom-options  gt          this  find  option   each function             template      lt span class  custom-option       this  attr  class        data-value        this  attr  value        gt       this  html       lt  span gt                template      lt  div gt  lt  div gt           this  wrap   lt div class  custom-select-wrapper  gt  lt  div gt           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         x000D  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           background   f2f0f0        x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt select name  sources  id  sources  class  custom-select sources  placeholder  My Categories  gt       lt option value  categoryOne  gt Category 1 lt  option gt       lt option value  categoryTwo  gt Category 2 lt  option gt       lt option value  categoryThree  gt Category 3 lt  option gt       lt option value  categoryFour  gt Category 4 lt  option gt    lt  select gt  x000D   x000D   x000D

User · Answer

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

});

User · Answer

Even if there aren t much properties to change  but you can achieve following style only with css    x000D   x000D   options     border  1px solid  e5e5e5    padding  10px     select     font-size  14px    border  none    width  100     background  white    x000D   lt div class  options  gt     lt select gt       lt option value    gt Apple lt  option gt       lt option value    gt Banana lt  option gt       lt option value    gt Orange lt  option gt       lt option value    gt Mango lt  option gt     lt  select gt   lt  div gt  x000D   x000D   x000D

User · Answer

Actually you can add  before and  after and style those  At least it s something  x000D   x000D  option     font-size  18px    background-color   ffffff     option before     content    gt      font-size  20px    display  none    padding-right  10px    padding-left  5px    color   fff     option hover before     display  inline    x000D   lt select id  ddlProducts  name  ddProducts  gt     lt option gt Product1   Electronics  lt  option gt     lt option gt Product2   Sports  lt  option gt   lt  select gt  x000D   x000D   x000D

User · Answer

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 font-size   value    background-color colorCode    border-radius value    this will work  but we can t customize the padding  margin etc     Below code 100  work to customize select tag taken from this example   x000D   x000D  var x  i  j  selElmnt  a  b  c  x000D    look for any elements with the class  custom-select     x000D  x   document getElementsByClassName  custom-select    x000D  for  i   0  i  lt  x length  i      x000D    selElmnt   x i  getElementsByTagName  select   0   x000D      for each element  create a new DIV that will act as the selected item    x000D    a   document createElement  DIV    x000D    a setAttribute  class    select-selected    x000D    a innerHTML   selElmnt options selElmnt selectedIndex  innerHTML  x000D    x i  appendChild a   x000D      for each element  create a new DIV that will contain the option list    x000D    b   document createElement  DIV    x000D    b setAttribute  class    select-items select-hide    x000D    for  j   1  j  lt  selElmnt length  j      x000D        for each option in the original select element  x000D      create a new DIV that will act as an option item    x000D      c   document createElement  DIV    x000D      c innerHTML   selElmnt options j  innerHTML  x000D      c addEventListener  click   function e    x000D            when an item is clicked  update the original select box  x000D          and the selected item    x000D          var y  i  k  s  h  x000D          s   this parentNode parentNode getElementsByTagName  select   0   x000D          h   this parentNode previousSibling  x000D          for  i   0  i  lt  s length  i      x000D            if  s options i  innerHTML    this innerHTML    x000D              s selectedIndex   i  x000D              h innerHTML   this innerHTML  x000D              y   this parentNode getElementsByClassName  same-as-selected    x000D              for  k   0  k  lt  y length  k      x000D                y k  removeAttribute  class    x000D                x000D              this setAttribute  class    same-as-selected    x000D              break  x000D              x000D            x000D          h click    x000D          x000D      b appendChild c   x000D      x000D    x i  appendChild b   x000D    a addEventListener  click   function e    x000D          when the select box is clicked  close any other select boxes  x000D        and open close the current select box    x000D        e stopPropagation    x000D        closeAllSelect this   x000D        this nextSibling classList toggle  select-hide    x000D        this classList toggle  select-arrow-active    x000D        x000D    x000D  function closeAllSelect elmnt    x000D      a function that will close all select boxes in the document  x000D    except the current select box    x000D    var x  y  i  arrNo       x000D    x   document getElementsByClassName  select-items    x000D    y   document getElementsByClassName  select-selected    x000D    for  i   0  i  lt  y length  i      x000D      if  elmnt    y i     x000D        arrNo push i  x000D        else   x000D        y i  classList remove  select-arrow-active    x000D        x000D      x000D    for  i   0  i  lt  x length  i      x000D      if  arrNo indexOf i     x000D        x i  classList add  select-hide    x000D        x000D      x000D    x000D    if the user clicks anywhere outside the select box  x000D  then close all select boxes    x000D  document addEventListener  click   closeAllSelect   x000D    the container must be positioned relative    x000D   custom-select   x000D    position  relative  x000D    font-family  Arial  x000D    x000D   custom-select select   x000D    display  none    hide original SELECT element    x000D    x000D   select-selected   x000D    background-color  DodgerBlue  x000D    x000D    style the arrow inside the select element    x000D   select-selected after   x000D    position  absolute  x000D    content      x000D    top  14px  x000D    right  10px  x000D    width  0  x000D    height  0  x000D    border  6px solid transparent  x000D    border-color   fff transparent transparent transparent  x000D    x000D    point the arrow upwards when the select box is open  active     x000D   select-selected select-arrow-active after   x000D    border-color  transparent transparent  fff transparent  x000D    top  7px  x000D    x000D    style the items  options   including the selected item    x000D   select-items div  select-selected   x000D    color   ffffff  x000D    padding  8px 16px  x000D    border  1px solid transparent  x000D    border-color  transparent transparent rgba 0  0  0  0 1  transparent  x000D    cursor  pointer  x000D    x000D    style items  options     x000D   select-items   x000D    position  absolute  x000D    background-color  DodgerBlue  x000D    top  100   x000D    left  0  x000D    right  0  x000D    z-index  99  x000D    x000D    hide the items when the select box is closed    x000D   select-hide   x000D    display  none  x000D    x000D   select-items div hover   same-as-selected   x000D    background-color  rgba 0  0  0  0 1   x000D    x000D   lt div class  custom-select  style  width 200px   gt  x000D     lt select gt  x000D       lt option value  0  gt Select car  lt  option gt  x000D       lt option value  1  gt Audi lt  option gt  x000D       lt option value  2  gt BMW lt  option gt  x000D       lt option value  3  gt Citroen lt  option gt  x000D       lt option value  4  gt Ford lt  option gt  x000D       lt option value  5  gt Honda lt  option gt  x000D       lt option value  6  gt Jaguar lt  option gt  x000D       lt option value  7  gt Land Rover lt  option gt  x000D       lt option value  8  gt Mercedes lt  option gt  x000D       lt option value  9  gt Mini lt  option gt  x000D       lt option value  10  gt Nissan lt  option gt  x000D       lt option value  11  gt Toyota lt  option gt  x000D       lt option value  12  gt Volvo lt  option gt  x000D     lt  select gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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.

User · Answer

There are only a few style attributes that can be applied to an  lt option gt  element  This is because this type of element is an example of a  quot replaced element quot   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  lt select gt  but are actually composed of regular HTML elements that CAN be styled

User · Answer

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    x000D   x000D  function toggleSelect     x000D   if  store classList 0       hidden    x000D      store classList    viewfull  x000D      x000D    else   x000D      store classList    hidden  x000D      x000D    x000D   store   x000D    overflow-y  scroll  x000D    max-height  110px  x000D    max-width  50  x000D     x000D    x000D   hidden   x000D    display  none x000D     x000D    x000D   viewfull   x000D    display  block x000D    x000D   x000D   store  nth-child 4    x000D    background-color  lime  x000D    x000D   x000D  span  font-size 2rem cursor pointer  x000D   lt span onclick  toggleSelect    gt   lt  span gt  x000D    lt div id  store  class  hidden  gt  x000D    x000D   lt ul gt  lt li gt  lt a href   keylogger  gt keylogger lt  a gt  lt  li gt  lt li gt  lt a href   1526269343113  gt 1526269343113 lt  a gt  lt  li gt  lt li gt  lt a href   slow  gt slow lt  a gt  lt  li gt  lt li gt  lt a href   slow2  gt slow2 lt  a gt  lt  li gt  lt li gt  lt a href   Benchmark  gt Benchmark lt  a gt  lt  li gt  lt li gt  lt a href   modal  gt modal lt  a gt  lt  li gt  lt li gt  lt a href   buma  gt buma lt  a gt  lt  li gt  lt li gt  lt a href   1526099371108  gt 1526099371108 lt  a gt  lt  li gt  lt a href   1526099371108o  gt 1526099371108o lt  a gt  lt  li gt  lt li gt  lt a href   pwnClrB  gt pwnClrB lt  a gt  lt  li gt  lt li gt  lt a href   stars 20u  gt stars 20u lt  a gt  lt  li gt  lt li gt  lt a href   pwnClrC  gt pwnClrC lt  a gt  lt  li gt  lt li gt  lt a href   stars   gt stars  lt  a gt  lt  li gt  lt li gt  lt a href   wello  gt wello lt  a gt  lt  li gt  lt li gt  lt a href   equalizer  gt equalizer lt  a gt  lt  li gt  lt li gt  lt a href   pwnClrA  gt pwnClrA lt  a gt  lt  li gt  lt  ul gt  x000D    x000D    lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Some properties can be styled for lt option gt  tag    font-family color font-  background-color   Also you can use custom font for individual  lt option gt  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  lt option gt  tags  eg        lt select gt           lt option style  font-family   Icons    Roboto   sans-serif   gt a        lt  option gt           lt option style  font-family   Icons    Roboto   sans-serif   gt b         lt  option gt       lt  select gt    where   is taken from Icons and the rest is from Roboto   Note though that custom fonts do not work for mobile select

User · Answer

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/

User · Answer

This element is rendered by the OS  not HTML  It cannot be styled via CSS     x000D   x000D     function     x000D      var clicky  x000D      var t 0  x000D        document  mousedown function e    x000D          clicky     e target   x000D          x000D        document  mouseup function e    x000D          clicky   null  x000D          x000D   x000D         select   focusout function e    x000D          if  typeof clicky attr  id       typeof undefined  amp  amp  clicky attr  id       false    x000D             this  parents   children  span selected   html clicky html     x000D             this  children  option value    clicky attr  id         prop  selected   true   x000D      x000D           x000D            this  parents   children  span lists   html      x000D           x000D   x000D          x000D         select  gt  option   text function i  text    x000D      var attr     this  attr  selected    x000D      if  typeof attr     typeof undefined  amp  amp  attr     false    x000D                this  parents   parents   children  span selected   html text   x000D        x000D       x000D   x000D       select   focusin function    x000D       this  children  option   text function i  text    x000D           this  parents   children  span lists   append   lt span class  item  id      this  attr  value      gt   text   lt  span gt     x000D          x000D        x000D   x000D       x000D  select   x000D    width  0px  x000D    height  0px  x000D    overflow hidden  x000D    outline  none  x000D    border  none  x000D    appearance none  x000D    -moz-appearance  none  x000D   x000D    x000D  label  x000D   display  inline-block  x000D   padding  5px 10px  x000D   position  relative  x000D   width  100px  x000D   height  20px  x000D   background-color  ccc  x000D   x000D    x000D  label  selected  x000D   display  inline-block  x000D   overflow  hidden  x000D   width  100   x000D   height  100   x000D    x000D  label span lists  x000D   width  100   x000D   display  inline-block  x000D   position  absolute  x000D   top  100   x000D   left  0px  x000D   box-shadow  0px 0px 2px 0px  ccc  x000D   background-color  fff  x000D   z-index  9  x000D    x000D  label span item  x000D   display  inline-block  x000D   width  100   x000D   border-bottom  1px solid  ccc  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D    lt meta charset  UTF-8  gt  x000D    lt title gt Document lt  title gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D    lt form action     method  GET  gt  x000D    lt label gt  lt span class  selected  gt select   lt  span gt   lt span class  lists  gt  lt  span gt  x000D    lt select name  test  gt  x000D     lt option value  1  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  lt  option gt  x000D     lt option value  2  selected gt item 2 lt  option gt  x000D     lt option value  3  gt item 3 lt  option gt  x000D     lt option value  4  gt item 4 lt  option gt  x000D    lt  select gt  x000D    lt  label gt  lt br gt  x000D    lt label gt  lt span class  selected  gt select   lt  span gt   lt span class  lists  gt  lt  span gt  x000D    lt select name  test2  gt  x000D     lt option value  1  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  lt  option gt  x000D     lt option value  2  gt item 2 lt  option gt  x000D     lt option value  3  selected gt item 3 lt  option gt  x000D     lt option value  4  gt item 4 lt  option gt  x000D    lt  select gt  x000D    lt  label gt  lt br gt  x000D    lt button gt Submit lt  button gt  x000D   lt  form gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    try this it may help you     https   codepen io venu9l pen jeNXzY  1

User · Answer

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

[html] How to style the option of an html "select" element?

The answer is

Bootstrap Select Library (jquery)

Select2 (JS lib)

MDBootstrap ($ & Bootstrap & JQuery)

Examples related to html

Examples related to css

Examples related to drop-down-menu

Tags