How do I make a placeholder for a select box

Question

I m using placeholders for text inputs which is working out just fine  But I d like to use a placeholder for my selectboxes as well  Of course I can just use this code    lt select gt       lt option value    gt Select your option lt  option gt       lt option value  hurr  gt Durr lt  option gt   lt  select gt    But the  Select your option  is in black instead of lightgrey  So my solution could possibly be CSS-based  jQuery is fine too   This only makes the option grey in the dropdown  so after clicking the arrow    option first       color   999      The question is  How do people create placeholders in selectboxes  But it has already been answered  cheers   And using this results in the selected value always being grey  even after selecting a real option    select       color   999

User · Answer

Another possibility in JavaScript       body   on  change    select   function  ev       if   this  find  option selected   val                     this  css  color     999              this  children   css  color    black              else             this  css  color    black              this  children   css  color    black                JSFiddle

User · Answer

I just stumbled across this question  and here s what works in Firefox and Chrome  at least     x000D   x000D   lt style gt  x000D  select invalid   color  gray    x000D   lt  style gt  x000D   lt form gt  x000D   lt select required gt  x000D       lt option value    disabled selected hidden gt Please Choose    lt  option gt  x000D       lt option value  0  gt Open when powered  most valves do this  lt  option gt  x000D       lt option value  1  gt Closed when powered  auto-opens when power is cut lt  option gt  x000D   lt  select gt  x000D   lt  form gt  x000D   x000D   x000D    The Disabled option stops the  lt option gt  being selected with both mouse and keyboard  whereas just using  display none  allows the user to still select via the keyboard arrows  The  display none  style just makes the list box look  nice    Note  Using an empty value attribute on the  placeholder  option allows validation  required attribute  to work around having the  placeholder   so if the option isn t changed  but is required  the browser should prompt the user to choose an option from the list   Update  July 2015    This method is confirmed working in the following browsers    Google Chrome - v 43 0 2357 132 Mozilla Firefox - v 39 0 Safari - v 8 0 7  the placeholder is visible in dropdown  but it is not selectable  Microsoft Internet Explorer - v 11  Placeholder is visible in dropdown but is not selectable  Project Spartan - v 15 10130  the placeholder is visible in dropdown  but it is not selectable    Update  October 2015    I removed the style  display  none  in favour of HTML5 attribute hidden which has wide support  The hidden element has similar traits as display  none in Safari  Internet nbsp Explorer   Project Spartan needs checking  where the option is visible in dropdown  but it is not selectable   Update  January 2016    When the select element is required it allows use of the  invalid CSS pseudo-class which allows you to style the select element when in its  placeholder  state   invalid works here because of the empty value in the placeholder option   Once a value has been set  the  invalid pseudo-class will be dropped  You can optionally also use  valid if you so wish   Most browsers support this pseudo-class  Internet nbsp Explorer nbsp 10 and later  This works best with custom styled select elements  in some cases i e   Mac in Chrome   Safari  you ll need to change the default appearance of the select box so that certain styles display  i e   background-color and color  You can find some examples and more about compatibility at developer mozilla org   Native element appearance Mac in Chrome     Using altered border element Mac in Chrome

User · Answer

There isn t any need for any JavaScript or CSS  just three attributes    lt select gt       lt option selected disabled hidden gt Default Value lt  option gt       lt option gt Value 1 lt  option gt       lt option gt Value 2 lt  option gt       lt option gt Value 3 lt  option gt       lt option gt Value 4 lt  option gt   lt  select gt    It doesn t show the option at all  it just sets the option s value as the default   However  if you just don t like a placeholder that s the same color as the rest  you can fix it inline like this    lt  DOCTYPE html gt   lt html gt       lt head gt           lt title gt Placeholder for select tag drop-down menu lt  title gt       lt  head gt        lt body onload  document getElementById  mySelect   selectedIndex   0  gt           lt select id  mySelect  onchange  document getElementById  mySelect   style color    black       style  color  gray     width  150px   gt             lt option value    hidden gt Select your beverage lt  option gt   lt  -- placeholder -- gt             lt option value  water  style  color black   gt Water lt  option gt             lt option value  milk  style  color black   gt Milk lt  option gt             lt option value  soda  style  color black   gt Soda lt  option gt           lt  select gt       lt  body gt   lt  html gt    Obviously  you can separated the functions and at least the select s CSS into separate files   Note  the onload function corrects a refresh bug

User · Answer

See this answer    lt select gt           lt option style  quot display  none  quot  value  quot  quot  selected gt SelectType lt  option gt           lt option value  quot 1 quot  gt Type 1 lt  option gt           lt option value  quot 2 quot  gt Type 2 lt  option gt           lt option value  quot 3 quot  gt Type 3 lt  option gt           lt option value  quot 4 quot  gt Type 4 lt  option gt   lt  select gt

User · Answer

Because of the diverse styling and functionality between answers provided in this thread  the table of below clarifies the styling and applicable form logic for each of the HTML  HTML CSS and HTML CSS Javascript solutions provided  I ve had to use code formatting because tables aren t permitted in markup  for some reason  A HTML table will be provided using the code snippet to work around the table restriction  I ve marked this post as community wiki so anyone can detail new posts  though please add JQuery  React  Angular  CoffeeScript  etc  to an alternate post to keep this table simple             Technologies                                                                  Styling                                                                    Post     CSS   Java-    Select  Placeholder    Select  valid option                     Option  placeholder                          Option  valid option          ID            script   Color    Validation   Color      Required      Visibility   Selectable   Color     Cond  formatting      Color     Cond  formatting     ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 41167307   No      No     Black     Invalid     Black        Yes          Visible         No       Grey             No             Black            No            ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 50200912   No      No     Black      Valid      Black         No         Invisible       N A        N A             No             Black            No            ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 5859221    No      No     Black      Valid      Black         No          Visible         No       Grey             No             Black            No            ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 38120777   No      No     Black      Valid      Black         No         Invisible       N A        N A             No             Black            No            ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 54860799   Yes     No     Grey      Invalid     Black        Yes         Invisible       N A        N A             No             Black            No            ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 52661024   Yes     No     Grey      Invalid     Black        Yes         Invisible       N A        N A             No             Black   select invalid Grey    ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 8442831    Yes     No     Grey      Invalid     Black        Yes         Invisible       N A        N A             No             Black   select invalid Grey    ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 29806043   Yes     No     Grey      Invalid     Black        Yes         Invisible       N A        N A             No             Black            No            ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 61966461   Yes     No     Grey      Invalid     Black        Yes         Invisible       N A        N A    select valid visible    Black            No            ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 44406771   Yes     No     Grey      Invalid     Grey         No           Visible         No       Grey             No             Black   select invalid Grey    ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 40603035   Yes     No     Black      Valid      Black        No          Invisible       N A        N A             No             Black            No            ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 22994211   Yes     No     Grey       Valid      Black        No          Invisible       N A        N A             No             Black            No            ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 21722343   Yes     No     Grey       Valid      Grey         No          Invisible       N A        N A             No             Black            No            ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 48960650   Yes    Yes     Grey      Invalid     Black        No          Invisible       N A        N A             No             Black            No            ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 5805194    Yes    Yes     Grey       Valid      Black        No           Visible        Yes       Black            No             Black            No            ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 50840409   Yes    Yes     Grey       Valid      Black        Yes          Visible        Yes       Grey             No             Black            No

User · Answer

I see signs of correct answers  but to bring it all together  this would be my solution    x000D   x000D  select   x000D    color  grey  x000D    x000D   x000D  option   x000D    color  black  x000D    x000D   x000D  option default    x000D     display  none  x000D    x000D   lt select gt  x000D       lt option value    default selected gt Select your option lt  option gt  x000D       lt option value  hurr  gt Durr lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

Try this for a change      select   css  color     757575      document  on  change    select   function        if    this  val                      this  css  color                   else             this  css  color     757575

User · Answer

Solution for Angular 2  Create a label on top of the select   lt label class  hidden-label  for  IsActive       ngIf  filterIsActive    undefined  gt Placeholder text lt  label gt   lt select class  form-control form-control-sm  type  text  name  filterIsActive        ngModel    filterIsActive  id  IsActive  gt       lt option value  true  gt true lt  option gt       lt option value  false  gt false lt  option gt   lt  select gt    and apply CSS to place it on top   hidden-label       position  absolute      margin-top   34rem      margin-left   56rem      font-style  italic      pointer-events  none      pointer-events  none allows you to display the select when you click on the label  which is hidden when you select an option   angular html css

User · Answer

I love the accepted solution  and it works great without JavaScript    I just want to add how I adopted this answer for a controlled-select React Component  because it took me a few tries to figure it out  It would be really simple to incorporate react-select and be done with it  but unless you need the amazing functionality this repository provides  which I don t for the project in question  there is no need to add any more kilobytes to my bundle  Note  react-select handles placeholders in selects through a complex system of various inputs and html elements   In React  for a controlled component  you cannot add the selected attribute to your options  React handles the state of the select via a value attribute upon the select itself  along with a change handler  where the value should match one of the value attributes within the options themselves   Such as  for example    lt select value  this state selectValue  onChange  this handleChange  required  true  gt       options   lt  select gt    Since it would be improper and in fact would throw an error to add the selected attribute to one of the options  what then   The answer is simple once you think about it  Since we want our first option to be selected as well as disabled and hidden  we need to do three things    Add the hidden and disabled attribute to the first defined option  Set the value of the first option to be an empty string  Initialize the value of the select to also be an empty string    state     selectValue           State or props or their equivalent     In the render function  lt select value  this state selectValue  onChange  this handleChange  required  true  gt       lt option key  someKey  value    disabled  disabled  hidden  hidden  gt Select from Below lt  option gt       renderOptions     lt  select gt    Now you can style the select as indicated above  or via a className if you prefer    select invalid   color  gray

User · Answer

Here s my contribution  Haml   CoffeeScript   SCSS  Haml   f collection select  country id   us    Country all   id   name   prompt  t  user country     class   form-control    CoffeeScript       select   on  change   - gt      if   this  val           this  css  color    black       else         this  css  color    gray        select   change     SCSS  select option     color  black      It s possible to use only CSS by changing the server code and only setting the class styles depending on the current value of the property  but this way seems easier and cleaner    x000D   x000D     select   on  change   function     x000D    if    this  val      x000D      return   this  css  color    black    x000D      else   x000D      return   this  css  color    gray    x000D      x000D      x000D   x000D     select   change    x000D      select option   x000D        color  black  x000D        x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select class  form-control  name  user country id   id  user country id  gt  x000D     lt option value    gt Country lt  option gt  x000D                         lt option value  231  gt United States lt  option gt  x000D                         lt option value  1  gt Andorra lt  option gt  x000D                         lt option value  2  gt Afghanistan lt  option gt  x000D                         lt option value  248  gt Zimbabwe lt  option gt  lt  select gt  x000D   x000D   x000D    You can add more CSS  select option first-child  to keep the placeholder gray when it opens  but I didn t care about that

User · Answer

The solution below works in Firefox also  without any JavaScript    x000D   x000D  option default    x000D    display  none  x000D    x000D   lt select gt  x000D     lt option value    default selected gt Select Your Age lt  option gt  x000D     lt option value  1  gt 1 lt  option gt  x000D     lt option value  2  gt 2 lt  option gt  x000D     lt option value  3  gt 3 lt  option gt  x000D     lt option value  4  gt 4 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I had the same problem and while searching I came across this question  and after I found a good solution for me  I would like to share it with you guys in case some one can benefit from it   Here it is   HTML    lt select class  place holder dropdown  gt       lt option selected  selected  style   display  none   gt Sort by lt  option gt       lt option gt two lt  option gt       lt option gt something lt  option gt       lt option gt 4 lt  option gt       lt option gt 5 lt  option gt   lt  select gt    CSS    place holder       color  gray    option       color   000000      JavaScript   jQuery   dropdown   change function          jQuery this  removeClass  place holder          After the customer makes the first select  there isn t any need for gray color  so the JavaScript code removes the class place holder   Thanks to  user1096901  as a workaround for the Internet nbsp Explorer browser  you can add the place holder class again in case the first option is selected again

User · Answer

Here is mine    x000D   x000D  select focus option holder   x000D    display  none  x000D    x000D   lt select gt  x000D       lt option selected  selected  class  holder  gt Please select lt  option gt  x000D       lt option value  1  gt Option  1 lt  option gt  x000D       lt option value  2  gt Option  2 lt  option gt  x000D   x000D   lt  select gt  x000D   x000D   x000D

User · Answer

Input  type  quot text quot   Style Placeholder for Select Elements The following solution simulates a placeholder as it relates to an input type  quot text quot   element   x000D   x000D      example   change function          this  css  color     this  val              999      555        x000D   example     color   999      example  gt  option     color   555      example  gt  option value         color   999    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt    lt select class  example  gt     lt option value    gt Select Option lt  option gt     lt option gt Option 1 lt  option gt     lt option gt Option 2 lt  option gt     lt option gt Option 3 lt  option gt   lt  select gt  x000D   x000D   x000D

User · Answer

A non-CSS - no JavaScript jQuery answer    x000D   x000D   lt select gt  x000D       lt option value    disabled selected gt Select your option lt  option gt  x000D       lt option value  hurr  gt Durr lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

Here is a CSS solution that works beautifully  The content is added  and absolutely positioned relative to the container  after the containing element  via  after pseudo-class    It gets its text from the placeholder attribute that I defined where I used the directive  attr placeholder    Another key factor is pointer-events  none - this allows clicks on the placeholder text to pass through to the select  Otherwise it won t drop down if the user clicks the text   I add the  empty class myself in my select directive  but normally I find that angular adds removes  ng-empty for me  I assume it s because I m injecting version 1 2 of Angular in my code sample     The sample also demonstrates how to wrap HTML elements in AngularJS to create your own custom inputs    x000D   x000D  var app   angular module  soDemo        x000D  app controller  soDemoController   function  scope    x000D    var vm       x000D    vm names      x000D        id  1  x000D        name   Jon  x000D         x000D        x000D        id  2  x000D        name   Joe  x000D           x000D        id  3  x000D        name   Bob  x000D           x000D        id  4  x000D        name   Jane  x000D        x000D       x000D    vm nameId  x000D     scope vm   vm  x000D      x000D   x000D  app directive  soSelect   function soSelect     x000D    var directive     x000D      restrict   E   x000D      require   ngModel   x000D      scope    x000D         valueProperty        x000D         displayProperty        x000D         modelProperty        x000D         source        x000D         x000D      link  link  x000D      template  getTemplate x000D       x000D    return directive  x000D   x000D   x000D                                      x000D    function link scope  element  attrs  ngModelController    x000D      init    x000D      return  x000D   x000D   x000D                    IMPLEMENTATION x000D   x000D      function init     x000D        initDataBinding    x000D        x000D   x000D   x000D      function initDataBinding     x000D        ngModelController  render   function     x000D          if  scope model     ngModelController  viewValue  return  x000D          scope model   ngModelController  viewValue  x000D          x000D   x000D        scope  watch  model   function newValue    x000D          if  newValue     undefined    x000D            element addClass  empty    x000D            return  x000D            x000D          element removeClass  empty    x000D          ngModelController  setViewValue newValue   x000D            x000D        x000D      x000D   x000D   x000D    function getTemplate element  attrs    x000D      var attributes     x000D         ng-model  model    x000D         ng-required  true   x000D         x000D   x000D      if  angular isDefined attrs placeholder     x000D        attributes push  placeholder    placeholder       x000D        x000D   x000D      var ngOptions       x000D   x000D      if  angular isDefined attrs valueProperty     x000D        ngOptions     item     attrs valueProperty     as    x000D        x000D   x000D      ngOptions     item     attrs displayProperty     for item in source   x000D      ngOptions         x000D      attributes push  ng-options      ngOptions         x000D   x000D      var html     lt select     attributes join          gt  lt  select gt    x000D   x000D      return html  x000D      x000D      x000D  so-select   x000D    position  relative  x000D    x000D   x000D  so-select select   x000D    font-family   Helvetica   x000D    display  inline-block  x000D    height  24px  x000D    width  200px  x000D    padding  0 1px  x000D    font-size  12px  x000D    color   222  x000D    border  1px solid  c7c7c7  x000D    border-radius  4px  x000D    x000D   x000D  so-select empty before   x000D    font-family   Helvetica   x000D    font-size  12px  x000D    content  attr placeholder   x000D    position  absolute  x000D    pointer-events  none  x000D    left  6px  x000D    top  3px  x000D    z-index  0  x000D    color   888  x000D    x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   x000D   lt div ng-app  soDemo  ng-controller  soDemoController  gt  x000D     lt so-select value-property  id  display-property  name  source  vm names  ng-model  vm nameId  placeholder   select name   gt  lt  so-select gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This HTML   CSS solution worked for me    x000D   x000D  form select invalid   x000D    color  gray  x000D    x000D   x000D  form select option first-child   x000D    color  gray  x000D    x000D   x000D  form select invalid option not  first-child    x000D    color  black  x000D    x000D   lt form gt  x000D     lt select required gt  x000D       lt option value    gt Select Planet    lt  option gt  x000D       lt option value  earth  gt Earth lt  option gt  x000D       lt option value  pandora  gt Pandora lt  option gt  x000D     lt  select gt  x000D   lt  form gt  x000D   x000D   x000D    Good Luck

User · Answer

Building upon MattW s answer  you can make the select placeholder option visible in the drop-down menu after a valid selection has been made  by conditionally hiding it only while the placeholder remains selected  and the select is therefore  invalid     x000D   x000D  select required invalid   x000D    color  gray  x000D    x000D  select invalid  gt  option value     disabled    x000D    display  none  x000D    x000D  option   x000D    color  black  x000D    x000D   lt select required gt  x000D       lt option value    disabled selected gt Select something    lt  option gt  x000D       lt option value  1  gt One lt  option gt  x000D       lt option value  2  gt Two lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

In Angular we can add an option as placeholder that can be hidden in option dropdown  We can even add a custom dropdown icon as background that replaces browser dropdown icon   The trick is to enable placeholder css only when value is not selected     My Component Template      lt div class  dropdown  gt         lt select  ngClass     placeholder    myForm value myField    class  form-control  formControlName  myField  gt           lt option value    hidden  gt Select a Gender lt  option gt           lt option value  Male  gt Male lt  option gt           lt option value  Female  gt Female lt  option gt         lt  select gt       lt  div gt       My Component TS     constructor fb  FormBuilder      this myForm   this fb build       myField                  global scss     dropdown     width  100     height  30px    overflow  hidden    background  no-repeat white    background-image url  angle-arrow-down svg      background-position  center right    select       background  transparent      padding  3px      font-size  1 2em      height  30px      width  100       overflow  hidden         For moz       -moz-appearance  none         IE10         amp   -ms-expand         display  none              For chrome       -webkit-appearance none       amp  placeholder         opacity  0 7        color  theme-color  mutedColor              option         color  black

User · Answer

If you are using Angular  go like this    x000D   x000D   lt select gt  x000D       lt option  ngValue   undefined   disabled selected gt Select your option lt  option gt  x000D       lt option  ngValue   hurr  gt Durr lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

For a required field  there is a pure-CSS solution in modern browsers    x000D   x000D  select required invalid   x000D    color  gray  x000D    x000D  option value     disabled    x000D    display  none  x000D    x000D  option   x000D    color  black  x000D    x000D   lt select required gt  x000D     lt option value    disabled selected gt Select something    lt  option gt  x000D     lt option value  1  gt One lt  option gt  x000D     lt option value  2  gt Two lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

You need form validation and modern browsers offer this from scratch   So you do not need to take care that the user can not select the field  Because when he is doing it  the browser validation will tell him  that this is a wrong selection   The browser built in validation function checkValidity     Bootstrap has there a nice example as well   HTML   lt form class  needs-validation  gt     lt select required gt       lt option value    gt Please select an option lt  option gt       lt option value  1  gt Foo lt  option gt       lt option value  2  gt Bar lt  option gt     lt  select gt   lt form gt    Javascript  form   document getElementByClassName  needs-validation    if form checkValidity       true        form validation succeeded   else       form validation failed

User · Answer

Here I have modified David s answer  accepted answer   On his answer  he put disabled and selected attribute on the option tag  but when we also put hidden tag then it will look much better   By adding an extra hidden attribute on the option tag  it will prevent the  Select your option  option from being re-selecting after the  Durr  option is selected    x000D   x000D   lt select gt  x000D       lt option value    disabled selected hidden gt Select your option lt  option gt  x000D       lt option value  hurr  gt Durr lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I just added a hidden attribute in an option like below  It is working fine for me    x000D   x000D   lt select gt  x000D     lt option hidden gt Sex lt  option gt  x000D     lt option gt Male lt  option gt  x000D     lt option gt Female lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

The user should not see the placeholder in select options  I suggest to use the hidden attribute for the placeholder option  and you don t need the selected attribute for this option  You can just put it as the first    x000D   x000D  select not  valid    x000D    color   999  x000D    x000D   lt select required gt  x000D       lt option value    hidden gt Select your option lt  option gt  x000D       lt option value  0  gt First option lt  option gt  x000D       lt option value  1  gt Second option lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

You can do this without using Javascript using only HTML You need to set default select option   disabled    and selected    and select tag required     Browser   doesn t allow user to submit the form without selecting an option     lt form action    method  POST  gt       lt select name  in-op  required    gt           lt option disabled    selected    gt Select Option lt  option gt           lt option gt Option 1 lt  option gt           lt option gt Option 2 lt  option gt           lt option gt Option 3 lt  option gt       lt  select gt       lt input type  submit  value  Submit  gt   lt  form gt

User · Answer

Here is a working example how to achieve this with pure JavaScript that handles the options color after the first click    lt  DOCTYPE html gt   lt html gt     lt head gt       lt style gt         myselect           color  gray               lt  style gt     lt  head gt      lt body gt       lt select id  myselect  gt         lt option disabled selected gt Choose Item        lt  option gt          lt option gt Item 1        lt  option gt          lt option gt Item 2        lt  option gt          lt option gt Item 3        lt  option gt       lt  select gt        lt script gt           Add event listener to change color in the first click       document getElementById  myselect   addEventListener  click   setColor        function setColor                   var combo   document getElementById  myselect            combo style color    red              Remove Event Listener after the color is changed at the first click         combo removeEventListener  click   setColor                lt  script gt     lt  body gt   lt  html gt

User · Answer

I couldn t get any of these to work currently  because for me it is  1  not required and  2  need the option to return to default selectable  So here s a heavy handed option if you are using jQuery    x000D   x000D  var  selects      select    x000D   selects change function      x000D    var option      option default   this   x000D    if option  amp  amp  option is   selected      x000D        this  css  color     999    x000D      x000D    else   x000D        this  css  color     555    x000D      x000D      x000D   x000D   selects each function     x000D      this  change    x000D      x000D  option   x000D      color   555  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select name  in-op  gt  x000D       lt option default selected gt Select Option lt  option gt  x000D       lt option gt Option 1 lt  option gt  x000D       lt option gt Option 2 lt  option gt  x000D       lt option gt Option 3 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I m not content with HTML CSS-only solutions  so I ve decided to create a custom select using JavaScript   This is something I ve written in the past 30 mins  thus it can be further improved   All you have to do is create a simple list with few data attributes  The code automatically turns the list into a selectable dropdown  It also adds a hidden input to hold the selected value  so it can be used in a form   Input    lt ul class  select  data-placeholder  Role  data-name  role  gt     lt li data-value  admin  gt Administrator lt  li gt     lt li data-value  mod  gt Moderator lt  li gt     lt li data-value  user  gt User lt  li gt   lt  ul gt    Output    lt div class  ul-select-container  gt       lt input type  hidden  name  role  class  hidden  gt       lt div class  selected placeholder  gt           lt span class  text  gt Role lt  span gt           lt span class  icon  gt   lt  span gt       lt  div gt       lt ul class  select  data-placeholder  Role  data-name  role  gt           lt li class  placeholder  gt Role lt  li gt           lt li data-value  admin  gt Administrator lt  li gt           lt li data-value  mod  gt Moderator lt  li gt           lt li data-value  user  gt User lt  li gt       lt  ul gt   lt  div gt    The text of the item that s supposed to be a placeholder is grayed out  The placeholder is selectable  in case the user wants to revert his her choice  Also using CSS  all the drawbacks of select can be overcome  e g   inability of the styling of the options      x000D   x000D     Helper function to create elements faster easier x000D     https   github com akinuri js-lib blob master element js x000D  var elem   function tagName  attributes  children  isHTML    x000D    let parent  x000D    if  typeof tagName     string     x000D      parent   document createElement tagName   x000D      else if  tagName instanceof HTMLElement    x000D      parent   tagName  x000D      x000D    if  attributes    x000D      for  let attribute in attributes    x000D        parent setAttribute attribute  attributes attribute    x000D        x000D      x000D    var isHTML   isHTML    null  x000D    if  children    children    0    x000D      elem append parent  children  isHTML   x000D      x000D    return parent  x000D     x000D  elem append   function parent  children  isHTML    x000D    if  parent instanceof HTMLTextAreaElement    parent instanceof HTMLInputElement    x000D      if  children instanceof Text    typeof children     string     typeof children     number     x000D        parent value   children  x000D        else if  children instanceof Array    x000D        children forEach function child    x000D          elem append parent  child   x000D            x000D        else if  typeof children     function     x000D        elem append parent  children     x000D        x000D      else   x000D      if  children instanceof HTMLElement    children instanceof Text    x000D        parent appendChild children   x000D        else if  typeof children     string     typeof children     number     x000D        if  isHTML    x000D          parent innerHTML    children  x000D          else   x000D          parent appendChild document createTextNode children    x000D          x000D        else if  children instanceof Array    x000D        children forEach function child    x000D          elem append parent  child   x000D            x000D        else if  typeof children     function     x000D        elem append parent  children     x000D        x000D      x000D     x000D   x000D   x000D     Initialize all selects on the page x000D     ul select   each function     x000D    var parent      this parentElement  x000D    var refElem     this nextElementSibling  x000D    var container   elem  div     class    ul-select-container     x000D    var hidden      elem  input     type    hidden    name   this dataset name   class    hidden     x000D    var selected    elem  div     class    selected placeholder      x000D      elem  span     class    text    this dataset placeholder   x000D      elem  span     class    icon      amp  9660    true   x000D        x000D    var placeholder   elem  li     class    placeholder    this dataset placeholder   x000D    this insertBefore placeholder  this children 0    x000D    container appendChild hidden   x000D    container appendChild selected   x000D    container appendChild this   x000D    parent insertBefore container  refElem   x000D      x000D   x000D     Update necessary elements with the selected option x000D      ul-select-container ul li   on  click   function     x000D    var text       this innerText  x000D    var value      this dataset value        x000D    var selected   this parentElement previousElementSibling  x000D    var hidden     selected previousElementSibling  x000D    hidden value   selected dataset value   value  x000D    selected children 0  innerText   text  x000D    if  this classList contains  placeholder      x000D      selected classList add  placeholder    x000D      else   x000D      selected classList remove  placeholder    x000D      x000D    selected parentElement classList remove  visible    x000D      x000D   x000D     Open select dropdown x000D      ul-select-container  selected   on  click   function     x000D    if  this parentElement classList contains  visible      x000D      this parentElement classList remove  visible    x000D      else   x000D      this parentElement classList add  visible    x000D      x000D      x000D   x000D     Close select when focus is lost x000D    document  on  click   function e    x000D    var container     e target  closest   ul-select-container    x000D    if  container length    0    x000D          ul-select-container visible   removeClass  visible    x000D      x000D      x000D   ul-select-container   x000D    width  200px  x000D    display  table  x000D    position  relative  x000D    margin  1em 0  x000D    x000D   ul-select-container visible ul   x000D    display  block  x000D    padding  0  x000D    list-style  none  x000D    margin  0  x000D    x000D   ul-select-container ul   x000D    background-color  white  x000D    border  1px solid hsla 0  0   60    x000D    border-top  none  x000D    -webkit-user-select  none  x000D    display  none  x000D    position  absolute  x000D    width  100   x000D    z-index  999  x000D    x000D   ul-select-container ul li   x000D    padding  2px 5px  x000D    x000D   ul-select-container ul li placeholder   x000D    opacity  0 5  x000D    x000D   ul-select-container ul li hover   x000D    background-color  dodgerblue  x000D    color  white  x000D    x000D   ul-select-container ul li placeholder hover   x000D    background-color  rgba 0  0  0   1   x000D    color  initial  x000D    x000D   ul-select-container  selected   x000D    background-color  white  x000D    padding  3px 10px 4px  x000D    padding  2px 5px  x000D    border  1px solid hsla 0  0   60    x000D    -webkit-user-select  none  x000D    x000D   ul-select-container  selected   x000D    display  flex  x000D    justify-content  space-between  x000D    x000D   ul-select-container  selected placeholder  text   x000D    color  rgba 0  0  0   5   x000D    x000D   ul-select-container  selected  icon   x000D    font-size   7em  x000D    display  flex  x000D    align-items  center  x000D    opacity  0 8  x000D    x000D   ul-select-container hover  selected   x000D    border  1px solid hsla 0  0   30    x000D    x000D   ul-select-container hover  selected  icon   x000D    opacity  1  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt ul class  select  data-placeholder  Role  data-name  role  gt  x000D     lt li data-value  admin  gt Administrator lt  li gt  x000D     lt li data-value  mod  gt Moderator lt  li gt  x000D     lt li data-value  user  gt User lt  li gt  x000D   lt  ul gt  x000D   x000D   lt ul class  select  data-placeholder  Sex  data-name  sex  gt  x000D     lt li data-value  male  gt Male lt  li gt  x000D     lt li data-value  female  gt Female lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D      Update  I ve improved this  selection using up down enter keys   tidied up the output a little bit  and turned this into a object  Current output    lt div class  li-select-container  gt       lt input type  text  readonly    placeholder  Role  title  Role  gt       lt span class  arrow  gt   lt  span gt       lt ul class  select  gt           lt li class  placeholder  gt Role lt  li gt           lt li data-value  admin  gt Administrator lt  li gt           lt li data-value  mod  gt Moderator lt  li gt           lt li data-value  user  gt User lt  li gt       lt  ul gt   lt  div gt    Initialization   new Liselect document getElementsByTagName  ul   0      For further examination   JSFiddle  GitHub  renamed      Update  I am have rewritten this again  Instead of using a list  we can just use a select  This way it ll work even without JavaScript  in case it s disabled    Input    lt select name  role  data-placeholder  Role  required title  Role  gt       lt option value  admin  gt Administrator lt  option gt       lt option value  mod  gt Moderator lt  option gt       lt option gt User lt  option gt   lt  select gt      new Advancelect document getElementsByTagName  select   0      Output    lt div class  advanced-select  gt       lt input type  text  readonly    placeholder  Role  title  Role  required    name  role  gt       lt span class  arrow  gt   lt  span gt       lt ul gt           lt li class  placeholder  gt Role lt  li gt           lt li data-value  admin  gt Administrator lt  li gt           lt li data-value  mod  gt Moderator lt  li gt           lt li gt User lt  li gt       lt  ul gt   lt  div gt    JSFiddle  GitHub

User · Answer

I wanted the SELECT to be grey until selected so for this piece of HTML    lt select gt     lt option value    disabled selected gt Select your option lt  option gt     lt option value  hurr  gt Durr lt  option gt   lt  select gt    I ve added these CSS definitions   select   color  grey    select valid   color  black      It works as expected in Chrome   Safari and maybe also in other browsers  but I haven t checked

User · Answer

try this it work good for my  lt select class  quot form-control quot  gt       lt option value  quot  quot  readonly  quot true quot  hidden  quot true quot  selected gt Select your option lt  option gt       lt option value  quot 1 quot  gt Something lt  option gt       lt option value  quot 2 quot  gt Something else lt  option gt       lt option value  quot 3 quot  gt Another choice lt  option gt   lt  select gt

User · Answer

Something like this   HTML    lt select id  choice  gt       lt option value  0  selected  selected  gt Choose    lt  option gt       lt option value  1  gt Something lt  option gt       lt option value  2  gt Something else lt  option gt       lt option value  3  gt Another choice lt  option gt   lt  select gt    CSS    choice option   color  black     empty   color  gray      JavaScript       choice   change function          if   this  val       0     this  addClass  empty        else   this  removeClass  empty            choice   change      Working example  http   jsfiddle net Zmf6t

User · Answer

If you re reading this and using React  use defaultValue    lt option defaultValue gt Select a country here lt  option gt

User · Answer

Based on Albireo s response  this version uses no jQuery and the CSS specificity is better    x000D   x000D  const triggerEvent    el  eventName    gt    x000D    let event   document createEvent  HTMLEvents   x000D    event initEvent eventName  true  false  x000D    el dispatchEvent event  x000D    x000D   x000D  let select   document querySelector   placeholder-select   x000D  select addEventListener  change    e    gt    x000D    e target classList e target value    0    add     remove    empty   x000D     x000D  triggerEvent select   change   x000D   placeholder-select option   x000D    color   000000  x000D    x000D   placeholder-select option first-child   x000D    color   444444  x000D    font-style  italic  x000D    font-weight  bold  x000D    x000D   placeholder-select empty   x000D    color   7F7F7F  x000D    x000D   lt select class  placeholder-select  gt  x000D     lt option value  0  selected  selected  gt Choose    lt  option gt  x000D     lt option value  1  gt Something lt  option gt  x000D     lt option value  2  gt Something else lt  option gt  x000D     lt option value  3  gt Another choice lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

You could set the first option s color to gray  set it s display to none  set the select s color to gray  and add an input event listener to it that sets it s color to black   x000D   x000D  select  gt  option not  first-of-type      color  black    x000D   lt select style  color gray  oninput  style color  black   gt     lt option style  display none  gt      Choose an option    lt  option gt     lt option gt      1    lt  option gt     lt option gt      2    lt  option gt     lt option gt      3    lt  option gt   lt  select gt  x000D   x000D   x000D   Using the customElement API   x000D   x000D  class placeholderSelect extends HTMLElement     connectedCallback         this outerHTML     lt select style  color gray  oninput  style color  black   gt     lt option style  display none  gt        this getAttribute  data-placeholder       lt  option gt      this innerHTML   lt  select gt        Array from this children  forEach function el  i          if  i     0            el style color    black                        customElements define  placeholder-select   placeholderSelect  x000D   lt placeholder-select data-placeholder  Choose an option  gt     lt option gt      1    lt  option gt     lt option gt      2    lt  option gt     lt option gt      3    lt  option gt   lt  placeholder-select gt  x000D   x000D   x000D

[html] How do I make a placeholder for a 'select' box?

Examples related to html

Examples related to css

Examples related to html-select

Examples related to placeholder