How do I make a placeholder for a 'select' box?

1252

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. Ofcourse I can just use this code:

<select>

    <option value="">Select your option</option>

    <option value="hurr">Durr</option>

</select>

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;

}

Edit: 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;

}

edited Aug 23 '16 at 18:46

William Perron

405514

asked Apr 27 '11 at 13:39

Thomas

6,71861723

add a comment |

1252

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. Ofcourse I can just use this code:

<select>

    <option value="">Select your option</option>

    <option value="hurr">Durr</option>

</select>

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;

}

Edit: 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;

}

edited Aug 23 '16 at 18:46

William Perron

405514

asked Apr 27 '11 at 13:39

Thomas

6,71861723

add a comment |

1252

264

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. Ofcourse I can just use this code:

<select>

    <option value="">Select your option</option>

    <option value="hurr">Durr</option>

</select>

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;

}

Edit: 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;

}

edited Aug 23 '16 at 18:46

William Perron

405514

asked Apr 27 '11 at 13:39

Thomas

6,71861723

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. Ofcourse I can just use this code:

<select>

    <option value="">Select your option</option>

    <option value="hurr">Durr</option>

</select>

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;

}

Edit: 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;

}

html css html5 html-select placeholder

edited Aug 23 '16 at 18:46

William Perron

405514

asked Apr 27 '11 at 13:39

Thomas

6,71861723

edited Aug 23 '16 at 18:46

William Perron

405514

asked Apr 27 '11 at 13:39

Thomas

6,71861723

edited Aug 23 '16 at 18:46

William Perron

405514

edited Aug 23 '16 at 18:46

William Perron

405514

edited Aug 23 '16 at 18:46

William Perron

405514

asked Apr 27 '11 at 13:39

Thomas

6,71861723

asked Apr 27 '11 at 13:39

Thomas

6,71861723

asked Apr 27 '11 at 13:39

Thomas

6,71861723

add a comment |

26 Answers
26

active

oldest

votes

2543

How about a non CSS - no javascript/jQuery answer?

<select>

    <option value="" disabled selected>Select your option</option>

    <option value="hurr">Durr</option>

</select>

edited May 12 '15 at 15:11

Andreas Grapentin

3,75032850

answered May 2 '11 at 15:45

David

29.4k31214

116

Firefox (10) doesn't show a disabled option as the default selection (placeholder). It shows the next one by default, in this case "Durr".

– jarnoan
Feb 27 '12 at 12:12

48

I usually add both disabled and selected. Seems to work in FF too.

– nilskp
May 21 '12 at 18:05

9

<select> <option value="" disabled selected>Select your option</option> </select>

– kolypto
Jul 5 '12 at 22:31

155

The reason this isn't the correct answer is because (I believe) the asker wants the select to be gray until another value has been selected. This answer makes the option gray in the drop down; but not the select element.

– Bill
Feb 8 '14 at 23:01

13

select { option[disabled] { display: none; } }

– Dimael Vertigo
Nov 11 '15 at 18:08

|
show 15 more comments

685

Just stumbled across this question, here's what works in FireFox & Chrome (at least)

<style>

    select:invalid { color: gray; }

</style>

<form>

    <select required>

        <option value="" disabled selected hidden>Please Choose...</option>

        <option value="0">Open when powered (most valves do this)</option>

        <option value="1">Closed when powered, auto-opens when power is cut</option>

    </select>

</form>

The Disabled option stops the <option> 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 (Placeholder is visible in dropdown but is not selectable)

Microsoft Internet Explorer - v.11 (Placeholder is visible in dropdown but is not selectable)

Project Spartan - v.15.10130 (Placeholder is visible in dropdown but is not selectable)

Update (October 2015):

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, IE, (Project Spartan needs checking) where the option is visible in dropdown but 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 it's "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. IE10+. 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, color. You can find some examples and more about compatibility at developer.mozilla.org.

Native element appearance Mac in Chrome:

Select box native Mac in Chrome

Using altered border element Mac in Chrome:

Altered select box Mac in Chrome

edited Jan 14 '16 at 14:05

answered Dec 9 '11 at 8:22

William Isted

7,47432039

5

@jaacob In browsers I've tested, the 'display:none' style hides the "Please choose" from the list which just makes it look nicer.

– William Isted
May 21 '12 at 18:42

34

Important to note that a disabled option can't be re-selected: if the select is mandatory, this is ok - but not if the select is optional.

– Robert Mark Bram
Nov 10 '12 at 15:06

2

Explorer11 ignores the display:none style.

– T30
Dec 16 '14 at 15:26

1

Kudos to @MattW for working out :invalid way before I did.

– William Isted
Jan 14 '16 at 14:06

2

You could also add a rule to "reset" the color of the options in supporting browsers as in this fiddle. This would help to reinforce that the disbled option is a placeholder. (Edit: I see MattW has already covered this in his answer)

– Shaggy
Jul 29 '16 at 9:58

|
show 9 more comments

201

For a required field, there is a pure-CSS solution in modern browsers:

select:required:invalid {

  color: gray;

}

option[value=""][disabled] {

  display: none;

}

option {

  color: black;

}

<select required>

  <option value="" disabled selected>Select something...</option>

  <option value="1">One</option>

  <option value="2">Two</option>

</select>

edited Mar 28 '16 at 16:09

dr.dimitru

2,1021532

answered Apr 22 '15 at 18:30

MattW

3,1601810

6

Amazing - it was the answer at the bottom (with no upvotes yet) that was the simplest, and actually works perfectly. Thanks! Hopefully this answer will rise to the top.

– Dan Nissenbaum
May 6 '15 at 14:14

1

@DanNissenbaum I was very late to the game, plus it does need the required to work so it's no use if you want the field to be optional.

– MattW
May 7 '15 at 22:50

1

As an aside, the :required selector is not supported in IE8 and below. The :invalid selector is not supported in IE9 and below. quirksmode.org/css/selectors

– Matt Wagner
Oct 14 '15 at 14:57

2

No solution for a non-required select?

– user3494047
Nov 29 '16 at 20:03

1

@user3494047 not with this approach - the required condition is what causes the browser to apply the :invalid pseudo-class when the placeholder is selected. [value=""] won't work as a replacement because what gets updated by user interaction is the value property but that CSS syntax refers to a (non-existent) attribute.

– MattW
Nov 30 '16 at 0:56

|
show 3 more comments

Something like this maybe?

HTML:

<select id="choice">

    <option value="0" selected="selected">Choose...</option>

    <option value="1">Something</option>

    <option value="2">Something else</option>

    <option value="3">Another choice</option>

</select>

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/

edited Apr 29 '12 at 0:01

Ry-♦

169k40342359

answered Apr 27 '11 at 13:50

Albireo

8,31495384

8

this is exactly what I did recently. but I added a keyup handler so that the change also occurs when an option is selected via keyboard (using the arrows or letter shortcuts) jsfiddle.net/Zmf6t/131

– Radu
Nov 17 '11 at 12:20

this put me on the right track... however i made the value = "" (nothing between the quotes) so that the when the submit button was clicked, it still failed to validate the first option and a browser popup would appear informing you to select an option... thanks @Albireo

– Craig Wayne
Dec 17 '13 at 13:22

Why did you called the change function explicitly.

– Foreever
Jun 3 '14 at 8:57

@Foreever because I set the CSS class in the select's change event handler, so if you don't manually raise the event when the control is built the style is not applied (it will be applied only when the user manually changes the value).

– Albireo
Jun 3 '14 at 13:14

add a comment |

I just added hidden attribute in option like below, It is working fine for me.

<select>

  <option hidden>Sex</option>

  <option>Male</option>

  <option>Female</option>

</select>

edited Jul 13 '16 at 5:37

answered Jun 30 '16 at 10:42

Ajithkumar S

542411

1

Just for the record, this doesn't work for me (Chrome on Win10).

– Chris Rae
Jan 11 '17 at 19:24

But you cannot unset it. You end up choosing one but you can't reset in case if you change your mind.

– Thielicious
Aug 18 '17 at 20:19

Yeah! But inside the form anyway user has to select any one of that options. If its not a required field remove the hidden attribute then.

– Ajithkumar S
Aug 21 '17 at 3:05

add a comment |

That solution works in FireFox also:

Without any JS.

option[default] {

  display: none;

}

<select>

  <option value="" default selected>Select Your Age</option>

  <option value="1">1</option>

  <option value="2">2</option>

  <option value="3">3</option>

  <option value="4">4</option>

</select>

edited May 12 '15 at 15:40

Ruslan López

2,91911527

answered Feb 12 '14 at 8:24

Dani-Br

1,07121627

add a comment |

I had the same problem and while searching came across this question, and after I found 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:

<select class="place_holder dropdown">

    <option selected="selected" style=" display: none;">Sort by</option>

    <option>two</option>

    <option>something</option>

    <option>4</option>

    <option>5</option>

</select>

CSS:

.place_holder{

    color: gray;

}

option{

    color: #000000;

}

JS:

jQuery(".dropdown").change(function () {

    jQuery(this).removeClass("place_holder");

});

After customer makes first select no need for gray color so JS removes the class place_holder.
I hope this helps someone :)

Update: Thanks to @user1096901, as a work around for IE browser, you can add place_holder class again in case first option is selected again :)

edited Jan 18 '16 at 16:21

falsarella

9,72545293

answered Aug 11 '14 at 5:00

rramiii

65241127

2

In some browsers he can still select the display:none option, becouse it is not hidden.

– Srneczek
Aug 21 '14 at 11:33

2

you are right I faced this in IE browser

– rramiii
Aug 30 '14 at 17:53

The work around for this is to add "place_holder" class again in case first option is selected :)

– rramiii
Nov 27 '14 at 10:09

add a comment |

There's no need for any JS or CSS, just 3 attributes:

<select>

    <option selected disabled hidden>Default Value</option>

    <option>Value 1</option>

    <option>Value 2</option>

    <option>Value 3</option>

    <option>Value 4</option>

</select>

it doesn't show the option at all, 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:

<!DOCTYPE html>

<html>

<head>

<title>Placeholder for select tag drop-down menu</title>

</head>



<body onload="document.getElementById('mySelect').selectedIndex = 0">



<select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'"  style="color: gray; width: 150px;">

  <option value="" hidden>Select your beverage</option> <!-- placeholder -->

  <option value="water" style="color:black" >Water</option>

  <option value="milk" style="color:black" >Milk</option>

  <option value="soda" style="color:black" >Soda</option>

</select>



</body>

</html>

Obviously, you can separated the functions and at least the select's CSS into separate files.

Note: the onload function corrects a refresh bug.

edited Feb 28 '18 at 11:54

Rob Atwater

answered Feb 24 '18 at 7:54

Jacob Schneider

466317

This doesn't work if the hidden option is the only one

– Eridanis
Feb 27 '18 at 11:12

but why would you have a drop down menu with only one option?

– Jacob Schneider
Mar 1 '18 at 6:09

I have a tabbed pop-up and the drop down menu from tab3 takes input from tab2, which it displays. Your answer is good and this is a corner case, but I would have expected the default value to show up as the first option, instead you get a blank drop down. See here: jsfiddle.net/n66L7sza

– Eridanis
Mar 1 '18 at 9:50

That is a good point, in which case you could scan the length of the dropdown, if it's zero, then remove the hidden attribute

– Jacob Schneider
Mar 1 '18 at 10:28

This doesn't seem to work correctly on Google Chrome 65.0.3325.181 on MacOS, it doesn't show the hidden entry and picks the one below it.

– Jamie H
Apr 7 '18 at 22:29

|
show 1 more comment

I see signs of correct answers but to bring it all together this would be my solution.

select{

  color: grey;

}



option {

  color: black;

}



option[default] {

   display: none;

}

<select>

    <option value="" default selected>Select your option</option>

    <option value="hurr">Durr</option>

</select>

edited Mar 17 '16 at 16:57

Eric G

2,03322341

answered Apr 10 '14 at 16:50

user3520445

13515

4

Durr is in gray after you select it. This forces the closed select box to be gray always.

– Chloe
Sep 25 '17 at 4:29

add a comment |

here is mine

select:focus option.holder {

  display: none;

}

<select>

    <option selected="selected" class="holder">Please select</option>

    <option value="1">Option #1</option>

    <option value="2">Option #2</option>



</select>

answered Nov 15 '16 at 6:00

Will Wang

42756

You could just add <option value="" selected disabled>Please select</option> as the first option.

– sstauross
Jan 4 '17 at 14:49

Wow. This is excellent!

– Georgy Ivanov
Jul 18 '17 at 7:53

It doesn't make the placeholder light gray.

– Chloe
Sep 25 '17 at 4:31

add a comment |

Here I have modified David answer (accepted answer). On his answer, he put disabled and selected attribute on option tag but when we also put hidden tag then it will look much better.
By adding an extra hidden attribute on option tag, will prevent the "Select your option" option from being re-selecting after the "Durr" option is selected.

<select>

    <option value="" disabled selected hidden>Select your option</option>

    <option value="hurr">Durr</option>

</select>

edited May 7 '18 at 8:27

answered May 6 '18 at 14:40

Nawaraj

167112

Please add a bit more information explaining how this differs from the accepted answer, and why it might be preferable.

– bgran
May 6 '18 at 15:05

I have updated why it differs from accepted answer.

– Nawaraj
May 6 '18 at 15:12

Thanks for the update, but the answer still doesn't explain why it looks different. For example, this answer prevents the "Select your option" option from being re-selecting after the "Durr" option is selected. Which attribute causes this behavior?

– bgran
May 6 '18 at 16:09

@bgran I hope this will help.

– Nawaraj
May 7 '18 at 8:29

add a comment |

Another possibility in JS:

 $('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

answered Jul 21 '14 at 17:14

Jean-philippe Emond

9731825

add a comment |

If you are using angular go like this

<select>

    <option [ngValue]="undefined"  disabled selected>Select your option</option>

    <option [ngValue]="hurr">Durr</option>

</select>

answered Aug 29 '18 at 9:06

arun kumar

235312

You could add the hidden attribute so that option isn't displayed when opening the select. But thanks any way for that answer, it worked for me.

– dcg
Dec 27 '18 at 22:48

add a comment |

User should not see the placeholder in select options. I suggest to use hidden attribute for placeholder option and you don't need selected attribute for this option you can just put it as the first.

select:not(:valid){

  color: #999;

}

<select required>

        <option value="" hidden>Select your option</option>

        <option value="0">First option</option>

        <option value="1">Second option</option>

    </select>

answered Oct 5 '18 at 8:03

Roman Yakoviv

513514

1

or select:invalid is also valid.

– elquimista
Oct 18 '18 at 22:03

add a comment |

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:

var $selects = $('select');

$selects.change(function () {

  var option = $('option:default', this);

  if(option && option.is(':selected')){

          $(this).css('color','#999');

  }

  else{

          $(this).css('color','#555');

  }

});



$selects.each(function(){

  $(this).change();

});

option{

    color: #555;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="in-op">

    <option default selected>Select Option</option>

    <option>Option 1</option>

    <option>Option 2</option>

    <option>Option 3</option>

</select>

answered Jun 13 '17 at 21:34

Eric G

2,03322341

Thanks, this was the best for me, as you said... the select element is required.

– Mousa Alfhaily
Nov 20 '18 at 0:11

add a comment |

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 b/c 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)

var app = angular.module("soDemo", );

app.controller("soDemoController", function($scope) {

  var vm = {};

  vm.names = [{

      id: 1,

      name: 'Jon'

    },

    {

      id: 2,

      name: 'Joe'

    }, {

      id: 3,

      name: 'Bob'

    }, {

      id: 4,

      name: 'Jane'

    }

  ];

  vm.nameId;

  $scope.vm = vm;

});



app.directive('soSelect', function soSelect() {

  var directive = {

    restrict: 'E',

    require: 'ngModel',

    scope: {

      'valueProperty': '@',

      'displayProperty': '@',

      'modelProperty': '=',

      'source': '=',

    },

    link: link,

    template: getTemplate

  };

  return directive;



  /////////////////////////////////

  function link(scope, element, attrs, ngModelController) {

    init();

    return;



    ///////////// IMPLEMENTATION



    function init() {

      initDataBinding();

    }



    function initDataBinding() {

      ngModelController.$render = function() {

        if (scope.model === ngModelController.$viewValue) return;

        scope.model = ngModelController.$viewValue;

      }



      scope.$watch('model', function(newValue) {

        if (newValue === undefined) {

          element.addClass('empty');

          return;

        }

        element.removeClass('empty');

        ngModelController.$setViewValue(newValue);

      });

    }

  }



  function getTemplate(element, attrs) {

    var attributes = [

      'ng-model="model"',

      'ng-required="true"'

    ];



    if (angular.isDefined(attrs.placeholder)) {

      attributes.push('placeholder="{{placeholder}}"');

    }



    var ngOptions = '';



    if (angular.isDefined(attrs.valueProperty)) {

      ngOptions += 'item.' + attrs.valueProperty + ' as ';

    }



    ngOptions += 'item.' + attrs.displayProperty + ' for item in source';

    ngOptions += '"';

    attributes.push('ng-options="' + ngOptions + '"');



    var html = '<select ' + attributes.join(' ') + '></select>';



    return html;

  }



});

so-select {

  position: relative;

}



so-select select {

  font-family: 'Helvetica';

  display: inline-block;

  height: 24px;

  width: 200px;

  padding: 0 1px;

  font-size: 12px;

  color: #222;

  border: 1px solid #c7c7c7;

  border-radius: 4px;

}



so-select.empty:before {

  font-family: 'Helvetica';

  font-size: 12px;

  content: attr(placeholder);

  position: absolute;

  pointer-events: none;

  left: 6px;

  top: 3px;

  z-index: 0;

  color: #888;

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="soDemo" ng-controller="soDemoController">

  <so-select value-property="id" display-property="name" source="vm.names" ng-model="vm.nameId" placeholder="(select name)"></so-select>

</div>

edited Jul 17 '17 at 19:40

answered Jun 8 '17 at 22:12

flyer

65239

add a comment |

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.

<form action="" method="POST">

    <select name="in-op" required="">

        <option disabled="" selected="">Select Option</option>

        <option>Option 1</option>

        <option>Option 2</option>

        <option>Option 3</option>

    </select>

    <input type="submit" value="Submit">

</form>

answered Dec 15 '16 at 15:03

Thusitha Wickramasinghe

5431722

This causes the whole select element to be grayed out until an option is chosen, thus causing a potentially undesired behaviour.

– wickedchild
Sep 11 '17 at 12:11

add a comment |

I wanted the SELECT to be grey until selected so for this piece of HTML:

<select>

  <option value="" disabled selected>Select your option</option>

  <option value="hurr">Durr</option>

</select>

I've added these CSS definitions:

select { color: grey; }

select:valid { color: black; }

It works as expected in Chrome / Safari, maybe also in other browsers but I haven't checked.

answered Jun 7 '17 at 7:56

fbparis

153312

add a comment |

Here is a working example how to achieve this with pure javascript that handles the options color after the first click:

<!DOCTYPE html>

<html>

  <head>

    <style>

    #myselect{

    color:gray;

    }

    </style>

  </head>

  <body>

    <select id="myselect">

      <option disabled selected>Choose Item

      </option>

      <option>Item 1

      </option>

      <option>Item 2

      </option>

      <option>Item 3

      </option>

    </select>

    <script>

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

      }

    </script>

  </body>

</html>

edited Feb 3 at 6:31

answered Jan 24 at 15:11

jonathana

3,13421226

add a comment |

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

    }

});

answered Feb 15 '18 at 7:41

Jordan Lipana

345

add a comment |

I'm not content with HTML/CSS only solutions, so I've decided to create a custom select using JS.

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:

<ul class="select" data-placeholder="Role" data-name="role">

  <li data-value="admin">Administrator</li>

  <li data-value="mod">Moderator</li>

  <li data-value="user">User</li>

</ul>

Output:

<div class="ul-select-container">

    <input type="hidden" name="role" class="hidden">

    <div class="selected placeholder">

        <span class="text">Role</span>

        <span class="icon">▼</span>

    </div>

    <ul class="select" data-placeholder="Role" data-name="role">

        <li class="placeholder">Role</li>

        <li data-value="admin">Administrator</li>

        <li data-value="mod">Moderator</li>

        <li data-value="user">User</li>

    </ul>

</div>

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

// helper function to create elements faster/easier

// https://github.com/akinuri/js-lib/blob/master/element.js

var elem = function(tagName, attributes, children, isHTML) {

  let parent;

  if (typeof tagName == "string") {

    parent = document.createElement(tagName);

  } else if (tagName instanceof HTMLElement) {

    parent = tagName;

  }

  if (attributes) {

    for (let attribute in attributes) {

      parent.setAttribute(attribute, attributes[attribute]);

    }

  }

  var isHTML = isHTML || null;

  if (children || children == 0) {

    elem.append(parent, children, isHTML);

  }

  return parent;

};

elem.append = function(parent, children, isHTML) {

  if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) {

    if (children instanceof Text || typeof children == "string" || typeof children == "number") {

      parent.value = children;

    } else if (children instanceof Array) {

      children.forEach(function(child) {

        elem.append(parent, child);

      });

    } else if (typeof children == "function") {

      elem.append(parent, children());

    }

  } else {

    if (children instanceof HTMLElement || children instanceof Text) {

      parent.appendChild(children);

    } else if (typeof children == "string" || typeof children == "number") {

      if (isHTML) {

        parent.innerHTML += children;

      } else {

        parent.appendChild(document.createTextNode(children));

      }

    } else if (children instanceof Array) {

      children.forEach(function(child) {

        elem.append(parent, child);

      });

    } else if (typeof children == "function") {

      elem.append(parent, children());

    }

  }

};





// initialize all selects on the page

$("ul.select").each(function() {

  var parent    = this.parentElement;

  var refElem   = this.nextElementSibling;

  var container = elem("div", {"class": "ul-select-container"});

  var hidden    = elem("input", {"type": "hidden", "name": this.dataset.name, "class": "hidden"});

  var selected  = elem("div", {"class": "selected placeholder"}, [

    elem("span", {"class": "text"}, this.dataset.placeholder),

    elem("span", {"class": "icon"}, "▼", true),

  ]);

  var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder);

  this.insertBefore(placeholder, this.children[0]);

  container.appendChild(hidden);

  container.appendChild(selected);

  container.appendChild(this);

  parent.insertBefore(container, refElem);

});



// update necessary elements with the selected option

$(".ul-select-container ul li").on("click", function() {

  var text     = this.innerText;

  var value    = this.dataset.value || "";

  var selected = this.parentElement.previousElementSibling;

  var hidden   = selected.previousElementSibling;

  hidden.value = selected.dataset.value = value;

  selected.children[0].innerText = text;

  if (this.classList.contains("placeholder")) {

    selected.classList.add("placeholder");

  } else {

    selected.classList.remove("placeholder");

  }

  selected.parentElement.classList.remove("visible");

});



// open select dropdown

$(".ul-select-container .selected").on("click", function() {

  if (this.parentElement.classList.contains("visible")) {

    this.parentElement.classList.remove("visible");

  } else {

    this.parentElement.classList.add("visible");

  }

});



// close select when focus is lost

$(document).on("click", function(e) {

  var container = $(e.target).closest(".ul-select-container");

  if (container.length == 0) {

    $(".ul-select-container.visible").removeClass("visible");

  }

});

.ul-select-container {

  width: 200px;

  display: table;

  position: relative;

  margin: 1em 0;

}

.ul-select-container.visible ul {

  display: block;

  padding: 0;

  list-style: none;

  margin: 0;

}

.ul-select-container ul {

  background-color: white;

  border: 1px solid hsla(0, 0%, 60%);

  border-top: none;

  -webkit-user-select: none;

  display: none;

  position: absolute;

  width: 100%;

  z-index: 999;

}

.ul-select-container ul li {

  padding: 2px 5px;

}

.ul-select-container ul li.placeholder {

  opacity: 0.5;

}

.ul-select-container ul li:hover {

  background-color: dodgerblue;

  color: white;

}

.ul-select-container ul li.placeholder:hover {

  background-color: rgba(0, 0, 0, .1);

  color: initial;

}

.ul-select-container .selected {

  background-color: white;

  padding: 3px 10px 4px;

  padding: 2px 5px;

  border: 1px solid hsla(0, 0%, 60%);

  -webkit-user-select: none;

}

.ul-select-container .selected {

  display: flex;

  justify-content: space-between;

}

.ul-select-container .selected.placeholder .text {

  color: rgba(0, 0, 0, .5);

}

.ul-select-container .selected .icon {

  font-size: .7em;

  display: flex;

  align-items: center;

  opacity: 0.8;

}

.ul-select-container:hover .selected {

  border: 1px solid hsla(0, 0%, 30%);

}

.ul-select-container:hover .selected .icon {

  opacity: 1;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<ul class="select" data-placeholder="Role" data-name="role">

  <li data-value="admin">Administrator</li>

  <li data-value="mod">Moderator</li>

  <li data-value="user">User</li>

</ul>



<ul class="select" data-placeholder="Sex" data-name="sex">

  <li data-value="male">Male</li>

  <li data-value="female">Female</li>

</ul>

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:

<div class="li-select-container">

    <input type="text" readonly="" placeholder="Role" title="Role">

    <span class="arrow">▼</span>

    <ul class="select">

        <li class="placeholder">Role</li>

        <li data-value="admin">Administrator</li>

        <li data-value="mod">Moderator</li>

        <li data-value="user">User</li>

    </ul>

</div>

Initialization:

new Liselect(document.getElementsByTagName("ul")[0]);

For further examination: JSFiddle, ~~GitHub~~ (renamed).

Update: Rewritten this again. Instead of using a list, we can just use a select. This way it'll work even without JS (in case it's disabled).

Input:

<select name="role" data-placeholder="Role" required title="Role">

    <option value="admin">Administrator</option>

    <option value="mod">Moderator</option>

    <option>User</option>

</select>

new Advancelect(document.getElementsByTagName("select")[0]);

Output:

<div class="advanced-select">

    <input type="text" readonly="" placeholder="Role" title="Role" required="" name="role">

    <span class="arrow">▼</span>

    <ul>

        <li class="placeholder">Role</li>

        <li data-value="admin">Administrator</li>

        <li data-value="mod">Moderator</li>

        <li>User</li>

    </ul>

</div>

JSFiddle, GitHub.

edited Jun 28 '18 at 14:03

answered Jun 13 '18 at 14:58

akinuri

3,64152554

add a comment |

Input `[type="text"]` Style Placeholder for Select Elements

The following solution simulates a placeholder as it relates to an input[type="text"] element:

$('.example').change(function () {

  $(this).css('color', $(this).val() === '' ? '#999' : '#555');

});

.example {

  color: #999;

}



.example > option {

  color: #555;

}



.example > option[value=""] {

  color: #999;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<select class="example">

  <option value="">Select Option</option>

  <option>Option 1</option>

  <option>Option 2</option>

  <option>Option 3</option>

</select>

edited Nov 22 '18 at 0:04

answered May 29 '18 at 16:19

Grant Miller

6,015133055

add a comment |

I love the accepted solution above 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 repo provides, which I don't for the project in question, there is no need to add any more KBs 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

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>

    {options}

</select>

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

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>

    <option key="someKey" value="" disabled="disabled" hidden="hidden">Select from Below</option>

    {renderOptions()}

</select>

Now you can style the select as indicated above( or via a className if you prefer )

select:invalid { color: gray; }

answered Jan 16 at 18:34

wlh

1,8701823

add a comment |

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

 <div class="dropdown">

      <select [ngClass]="{'placeholder': !myForm.value.myField}"

 class="form-control" formControlName="myField">

        <option value="" hidden >Select a Gender</option>

        <option value="Male">Male</option>

        <option value="Female">Female</option>

      </select>

    </div>

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

    &::-ms-expand {

      display: none;

    }

    /*For chrome*/

    -webkit-appearance:none;

    &.placeholder {

      opacity: 0.7;

      color: theme-color('mutedColor');

    }

    option {

      color: black;

    }

  }

}

answered Jan 26 at 12:10

Mukundhan

827512

add a comment |

-2

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

    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.

$('select').on('change', function() {

  if ($(this).val()) {

    return $(this).css('color', 'black');

  } else {

    return $(this).css('color', 'gray');

  }

});



$('select').change();

    select option {

      color: black;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" name="user[country_id]" id="user_country_id">

  <option value="">Country</option>

                      <option value="231">United States</option>

                      <option value="1">Andorra</option>

                      <option value="2">Afghanistan</option>

                      <option value="248">Zimbabwe</option></select>

You can add more CSS (select option:first-child) to keep the placeholder gray when it opens, but I didn't care about that.

answered Sep 25 '17 at 4:42

Chloe

10.9k1979193

add a comment |

-6

~~In respect to all solutions above, but this one seems to be most valid due to HTML specs:~~

<select>

  <optgroup label="Your placeholder">

    <option value="value">Label</option>

  </optgroup>

</select>

UPDATE: Pardon me for this incorrect answer, this is definitely not a placeholder solution for the select element, but a title for grouped options under opened select element list.

edited May 23 '17 at 3:23

answered Mar 28 '16 at 15:26

dr.dimitru

2,1021532

5

this answer is not correct at all , Optgroup is like a header legend to collect complex options .

– Hos Mercury
Aug 21 '16 at 1:03

add a comment |

protected by Josh Crozier Aug 30 '14 at 21:50

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

26 Answers
26

active

oldest

votes

26 Answers
26

active

oldest

votes

2543

How about a non CSS - no javascript/jQuery answer?

<select>

    <option value="" disabled selected>Select your option</option>

    <option value="hurr">Durr</option>

</select>

edited May 12 '15 at 15:11

Andreas Grapentin

3,75032850

answered May 2 '11 at 15:45

David

29.4k31214

116

Firefox (10) doesn't show a disabled option as the default selection (placeholder). It shows the next one by default, in this case "Durr".

– jarnoan
Feb 27 '12 at 12:12

48

I usually add both disabled and selected. Seems to work in FF too.

– nilskp
May 21 '12 at 18:05

9

<select> <option value="" disabled selected>Select your option</option> </select>

– kolypto
Jul 5 '12 at 22:31

155

The reason this isn't the correct answer is because (I believe) the asker wants the select to be gray until another value has been selected. This answer makes the option gray in the drop down; but not the select element.

– Bill
Feb 8 '14 at 23:01

13

select { option[disabled] { display: none; } }

– Dimael Vertigo
Nov 11 '15 at 18:08

|
show 15 more comments

2543

How about a non CSS - no javascript/jQuery answer?

<select>

    <option value="" disabled selected>Select your option</option>

    <option value="hurr">Durr</option>

</select>

edited May 12 '15 at 15:11

Andreas Grapentin

3,75032850

answered May 2 '11 at 15:45

David

29.4k31214

116

Firefox (10) doesn't show a disabled option as the default selection (placeholder). It shows the next one by default, in this case "Durr".

– jarnoan
Feb 27 '12 at 12:12

48

I usually add both disabled and selected. Seems to work in FF too.

– nilskp
May 21 '12 at 18:05

9

<select> <option value="" disabled selected>Select your option</option> </select>

– kolypto
Jul 5 '12 at 22:31

155

The reason this isn't the correct answer is because (I believe) the asker wants the select to be gray until another value has been selected. This answer makes the option gray in the drop down; but not the select element.

– Bill
Feb 8 '14 at 23:01

13

select { option[disabled] { display: none; } }

– Dimael Vertigo
Nov 11 '15 at 18:08

|
show 15 more comments

2543

How about a non CSS - no javascript/jQuery answer?

<select>

    <option value="" disabled selected>Select your option</option>

    <option value="hurr">Durr</option>

</select>

edited May 12 '15 at 15:11

Andreas Grapentin

3,75032850

answered May 2 '11 at 15:45

David

29.4k31214

How about a non CSS - no javascript/jQuery answer?

<select>

    <option value="" disabled selected>Select your option</option>

    <option value="hurr">Durr</option>

</select>

<select>

    <option value="" disabled selected>Select your option</option>

    <option value="hurr">Durr</option>

</select>

<select>

    <option value="" disabled selected>Select your option</option>

    <option value="hurr">Durr</option>

</select>

edited May 12 '15 at 15:11

Andreas Grapentin

3,75032850

answered May 2 '11 at 15:45

David

29.4k31214

edited May 12 '15 at 15:11

Andreas Grapentin

3,75032850

edited May 12 '15 at 15:11

Andreas Grapentin

3,75032850

edited May 12 '15 at 15:11

Andreas Grapentin

3,75032850

answered May 2 '11 at 15:45

David

29.4k31214

answered May 2 '11 at 15:45

David

29.4k31214

answered May 2 '11 at 15:45

David

29.4k31214

116

Firefox (10) doesn't show a disabled option as the default selection (placeholder). It shows the next one by default, in this case "Durr".

– jarnoan
Feb 27 '12 at 12:12

48

I usually add both disabled and selected. Seems to work in FF too.

– nilskp
May 21 '12 at 18:05

9

<select> <option value="" disabled selected>Select your option</option> </select>

– kolypto
Jul 5 '12 at 22:31

155

The reason this isn't the correct answer is because (I believe) the asker wants the select to be gray until another value has been selected. This answer makes the option gray in the drop down; but not the select element.

– Bill
Feb 8 '14 at 23:01

13

select { option[disabled] { display: none; } }

– Dimael Vertigo
Nov 11 '15 at 18:08

|
show 15 more comments

116

Firefox (10) doesn't show a disabled option as the default selection (placeholder). It shows the next one by default, in this case "Durr".

– jarnoan
Feb 27 '12 at 12:12

48

I usually add both disabled and selected. Seems to work in FF too.

– nilskp
May 21 '12 at 18:05

9

<select> <option value="" disabled selected>Select your option</option> </select>

– kolypto
Jul 5 '12 at 22:31

155

The reason this isn't the correct answer is because (I believe) the asker wants the select to be gray until another value has been selected. This answer makes the option gray in the drop down; but not the select element.

– Bill
Feb 8 '14 at 23:01

13

select { option[disabled] { display: none; } }

– Dimael Vertigo
Nov 11 '15 at 18:08

116

Firefox (10) doesn't show a disabled option as the default selection (placeholder). It shows the next one by default, in this case "Durr".

– jarnoan
Feb 27 '12 at 12:12

I usually add both disabled and selected. Seems to work in FF too.

– nilskp
May 21 '12 at 18:05

<select> <option value="" disabled selected>Select your option</option> </select>

– kolypto
Jul 5 '12 at 22:31

155

The reason this isn't the correct answer is because (I believe) the asker wants the select to be gray until another value has been selected. This answer makes the option gray in the drop down; but not the select element.

– Bill
Feb 8 '14 at 23:01

select { option[disabled] { display: none; } }

– Dimael Vertigo
Nov 11 '15 at 18:08

|
show 15 more comments

685

Just stumbled across this question, here's what works in FireFox & Chrome (at least)

<style>

    select:invalid { color: gray; }

</style>

<form>

    <select required>

        <option value="" disabled selected hidden>Please Choose...</option>

        <option value="0">Open when powered (most valves do this)</option>

        <option value="1">Closed when powered, auto-opens when power is cut</option>

    </select>

</form>

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 (Placeholder is visible in dropdown but is not selectable)

Microsoft Internet Explorer - v.11 (Placeholder is visible in dropdown but is not selectable)

Project Spartan - v.15.10130 (Placeholder is visible in dropdown but is not selectable)

Update (October 2015):

Update (January 2016):

Once a value has been set the :invalid pseudo-class will be dropped. You can optionally also use :valid if you so wish.

Native element appearance Mac in Chrome:

Select box native Mac in Chrome

Using altered border element Mac in Chrome:

Altered select box Mac in Chrome

edited Jan 14 '16 at 14:05

answered Dec 9 '11 at 8:22

William Isted

7,47432039

5

@jaacob In browsers I've tested, the 'display:none' style hides the "Please choose" from the list which just makes it look nicer.

– William Isted
May 21 '12 at 18:42

34

Important to note that a disabled option can't be re-selected: if the select is mandatory, this is ok - but not if the select is optional.

– Robert Mark Bram
Nov 10 '12 at 15:06

2

Explorer11 ignores the display:none style.

– T30
Dec 16 '14 at 15:26

1

Kudos to @MattW for working out :invalid way before I did.

– William Isted
Jan 14 '16 at 14:06

2

You could also add a rule to "reset" the color of the options in supporting browsers as in this fiddle. This would help to reinforce that the disbled option is a placeholder. (Edit: I see MattW has already covered this in his answer)

– Shaggy
Jul 29 '16 at 9:58

|
show 9 more comments

685

Just stumbled across this question, here's what works in FireFox & Chrome (at least)

<style>

    select:invalid { color: gray; }

</style>

<form>

    <select required>

        <option value="" disabled selected hidden>Please Choose...</option>

        <option value="0">Open when powered (most valves do this)</option>

        <option value="1">Closed when powered, auto-opens when power is cut</option>

    </select>

</form>

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 (Placeholder is visible in dropdown but is not selectable)

Microsoft Internet Explorer - v.11 (Placeholder is visible in dropdown but is not selectable)

Project Spartan - v.15.10130 (Placeholder is visible in dropdown but is not selectable)

Update (October 2015):

Update (January 2016):

Once a value has been set the :invalid pseudo-class will be dropped. You can optionally also use :valid if you so wish.

Native element appearance Mac in Chrome:

Select box native Mac in Chrome

Using altered border element Mac in Chrome:

Altered select box Mac in Chrome

edited Jan 14 '16 at 14:05

answered Dec 9 '11 at 8:22

William Isted

7,47432039

5

@jaacob In browsers I've tested, the 'display:none' style hides the "Please choose" from the list which just makes it look nicer.

– William Isted
May 21 '12 at 18:42

34

Important to note that a disabled option can't be re-selected: if the select is mandatory, this is ok - but not if the select is optional.

– Robert Mark Bram
Nov 10 '12 at 15:06

2

Explorer11 ignores the display:none style.

– T30
Dec 16 '14 at 15:26

1

Kudos to @MattW for working out :invalid way before I did.

– William Isted
Jan 14 '16 at 14:06

2

You could also add a rule to "reset" the color of the options in supporting browsers as in this fiddle. This would help to reinforce that the disbled option is a placeholder. (Edit: I see MattW has already covered this in his answer)

– Shaggy
Jul 29 '16 at 9:58

|
show 9 more comments

685

Just stumbled across this question, here's what works in FireFox & Chrome (at least)

<style>

    select:invalid { color: gray; }

</style>

<form>

    <select required>

        <option value="" disabled selected hidden>Please Choose...</option>

        <option value="0">Open when powered (most valves do this)</option>

        <option value="1">Closed when powered, auto-opens when power is cut</option>

    </select>

</form>

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 (Placeholder is visible in dropdown but is not selectable)

Microsoft Internet Explorer - v.11 (Placeholder is visible in dropdown but is not selectable)

Project Spartan - v.15.10130 (Placeholder is visible in dropdown but is not selectable)

Update (October 2015):

Update (January 2016):

Once a value has been set the :invalid pseudo-class will be dropped. You can optionally also use :valid if you so wish.

Native element appearance Mac in Chrome:

Select box native Mac in Chrome

Using altered border element Mac in Chrome:

Altered select box Mac in Chrome

edited Jan 14 '16 at 14:05

answered Dec 9 '11 at 8:22

William Isted

7,47432039

Just stumbled across this question, here's what works in FireFox & Chrome (at least)

<style>

    select:invalid { color: gray; }

</style>

<form>

    <select required>

        <option value="" disabled selected hidden>Please Choose...</option>

        <option value="0">Open when powered (most valves do this)</option>

        <option value="1">Closed when powered, auto-opens when power is cut</option>

    </select>

</form>

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 (Placeholder is visible in dropdown but is not selectable)

Microsoft Internet Explorer - v.11 (Placeholder is visible in dropdown but is not selectable)

Project Spartan - v.15.10130 (Placeholder is visible in dropdown but is not selectable)

Update (October 2015):

Update (January 2016):

Once a value has been set the :invalid pseudo-class will be dropped. You can optionally also use :valid if you so wish.

Native element appearance Mac in Chrome:

Select box native Mac in Chrome

Using altered border element Mac in Chrome:

Altered select box Mac in Chrome

<style>

    select:invalid { color: gray; }

</style>

<form>

    <select required>

        <option value="" disabled selected hidden>Please Choose...</option>

        <option value="0">Open when powered (most valves do this)</option>

        <option value="1">Closed when powered, auto-opens when power is cut</option>

    </select>

</form>

<style>

    select:invalid { color: gray; }

</style>

<form>

    <select required>

        <option value="" disabled selected hidden>Please Choose...</option>

        <option value="0">Open when powered (most valves do this)</option>

        <option value="1">Closed when powered, auto-opens when power is cut</option>

    </select>

</form>

edited Jan 14 '16 at 14:05

answered Dec 9 '11 at 8:22

William Isted

7,47432039

edited Jan 14 '16 at 14:05

answered Dec 9 '11 at 8:22

William Isted

7,47432039

answered Dec 9 '11 at 8:22

William Isted

7,47432039

answered Dec 9 '11 at 8:22

William Isted

7,47432039

5

@jaacob In browsers I've tested, the 'display:none' style hides the "Please choose" from the list which just makes it look nicer.

– William Isted
May 21 '12 at 18:42

34

Important to note that a disabled option can't be re-selected: if the select is mandatory, this is ok - but not if the select is optional.

– Robert Mark Bram
Nov 10 '12 at 15:06

2

Explorer11 ignores the display:none style.

– T30
Dec 16 '14 at 15:26

1

Kudos to @MattW for working out :invalid way before I did.

– William Isted
Jan 14 '16 at 14:06

2

You could also add a rule to "reset" the color of the options in supporting browsers as in this fiddle. This would help to reinforce that the disbled option is a placeholder. (Edit: I see MattW has already covered this in his answer)

– Shaggy
Jul 29 '16 at 9:58

|
show 9 more comments

5

@jaacob In browsers I've tested, the 'display:none' style hides the "Please choose" from the list which just makes it look nicer.

– William Isted
May 21 '12 at 18:42

34

Important to note that a disabled option can't be re-selected: if the select is mandatory, this is ok - but not if the select is optional.

– Robert Mark Bram
Nov 10 '12 at 15:06

2

Explorer11 ignores the display:none style.

– T30
Dec 16 '14 at 15:26

1

Kudos to @MattW for working out :invalid way before I did.

– William Isted
Jan 14 '16 at 14:06

2

You could also add a rule to "reset" the color of the options in supporting browsers as in this fiddle. This would help to reinforce that the disbled option is a placeholder. (Edit: I see MattW has already covered this in his answer)

– Shaggy
Jul 29 '16 at 9:58

@jaacob In browsers I've tested, the 'display:none' style hides the "Please choose" from the list which just makes it look nicer.

– William Isted
May 21 '12 at 18:42

Important to note that a disabled option can't be re-selected: if the select is mandatory, this is ok - but not if the select is optional.

– Robert Mark Bram
Nov 10 '12 at 15:06

Explorer11 ignores the display:none style.

– T30
Dec 16 '14 at 15:26

Kudos to @MattW for working out :invalid way before I did.

– William Isted
Jan 14 '16 at 14:06

You could also add a rule to "reset" the color of the options in supporting browsers as in this fiddle. This would help to reinforce that the disbled option is a placeholder. (Edit: I see MattW has already covered this in his answer)

– Shaggy
Jul 29 '16 at 9:58

|
show 9 more comments

201

For a required field, there is a pure-CSS solution in modern browsers:

select:required:invalid {

  color: gray;

}

option[value=""][disabled] {

  display: none;

}

option {

  color: black;

}

<select required>

  <option value="" disabled selected>Select something...</option>

  <option value="1">One</option>

  <option value="2">Two</option>

</select>

edited Mar 28 '16 at 16:09

dr.dimitru

2,1021532

answered Apr 22 '15 at 18:30

MattW

3,1601810

6

Amazing - it was the answer at the bottom (with no upvotes yet) that was the simplest, and actually works perfectly. Thanks! Hopefully this answer will rise to the top.

– Dan Nissenbaum
May 6 '15 at 14:14

1

@DanNissenbaum I was very late to the game, plus it does need the required to work so it's no use if you want the field to be optional.

– MattW
May 7 '15 at 22:50

1

As an aside, the :required selector is not supported in IE8 and below. The :invalid selector is not supported in IE9 and below. quirksmode.org/css/selectors

– Matt Wagner
Oct 14 '15 at 14:57

2

No solution for a non-required select?

– user3494047
Nov 29 '16 at 20:03

1

@user3494047 not with this approach - the required condition is what causes the browser to apply the :invalid pseudo-class when the placeholder is selected. [value=""] won't work as a replacement because what gets updated by user interaction is the value property but that CSS syntax refers to a (non-existent) attribute.

– MattW
Nov 30 '16 at 0:56

|
show 3 more comments

201

For a required field, there is a pure-CSS solution in modern browsers:

select:required:invalid {

  color: gray;

}

option[value=""][disabled] {

  display: none;

}

option {

  color: black;

}

<select required>

  <option value="" disabled selected>Select something...</option>

  <option value="1">One</option>

  <option value="2">Two</option>

</select>

edited Mar 28 '16 at 16:09

dr.dimitru

2,1021532

answered Apr 22 '15 at 18:30

MattW

3,1601810

6

Amazing - it was the answer at the bottom (with no upvotes yet) that was the simplest, and actually works perfectly. Thanks! Hopefully this answer will rise to the top.

– Dan Nissenbaum
May 6 '15 at 14:14

1

@DanNissenbaum I was very late to the game, plus it does need the required to work so it's no use if you want the field to be optional.

– MattW
May 7 '15 at 22:50

1

As an aside, the :required selector is not supported in IE8 and below. The :invalid selector is not supported in IE9 and below. quirksmode.org/css/selectors

– Matt Wagner
Oct 14 '15 at 14:57

2

No solution for a non-required select?

– user3494047
Nov 29 '16 at 20:03

1

@user3494047 not with this approach - the required condition is what causes the browser to apply the :invalid pseudo-class when the placeholder is selected. [value=""] won't work as a replacement because what gets updated by user interaction is the value property but that CSS syntax refers to a (non-existent) attribute.

– MattW
Nov 30 '16 at 0:56

|
show 3 more comments

201

For a required field, there is a pure-CSS solution in modern browsers:

select:required:invalid {

  color: gray;

}

option[value=""][disabled] {

  display: none;

}

option {

  color: black;

}

<select required>

  <option value="" disabled selected>Select something...</option>

  <option value="1">One</option>

  <option value="2">Two</option>

</select>

edited Mar 28 '16 at 16:09

dr.dimitru

2,1021532

answered Apr 22 '15 at 18:30

MattW

3,1601810

For a required field, there is a pure-CSS solution in modern browsers:

select:required:invalid {

  color: gray;

}

option[value=""][disabled] {

  display: none;

}

option {

  color: black;

}

<select required>

  <option value="" disabled selected>Select something...</option>

  <option value="1">One</option>

  <option value="2">Two</option>

</select>

select:required:invalid {

  color: gray;

}

option[value=""][disabled] {

  display: none;

}

option {

  color: black;

}

<select required>

  <option value="" disabled selected>Select something...</option>

  <option value="1">One</option>

  <option value="2">Two</option>

</select>

select:required:invalid {

  color: gray;

}

option[value=""][disabled] {

  display: none;

}

option {

  color: black;

}

<select required>

  <option value="" disabled selected>Select something...</option>

  <option value="1">One</option>

  <option value="2">Two</option>

</select>

edited Mar 28 '16 at 16:09

dr.dimitru

2,1021532

answered Apr 22 '15 at 18:30

MattW

3,1601810

edited Mar 28 '16 at 16:09

dr.dimitru

2,1021532

edited Mar 28 '16 at 16:09

dr.dimitru

2,1021532

edited Mar 28 '16 at 16:09

dr.dimitru

2,1021532

answered Apr 22 '15 at 18:30

MattW

3,1601810

answered Apr 22 '15 at 18:30

MattW

3,1601810

answered Apr 22 '15 at 18:30

MattW

3,1601810

6

Amazing - it was the answer at the bottom (with no upvotes yet) that was the simplest, and actually works perfectly. Thanks! Hopefully this answer will rise to the top.

– Dan Nissenbaum
May 6 '15 at 14:14

1

@DanNissenbaum I was very late to the game, plus it does need the required to work so it's no use if you want the field to be optional.

– MattW
May 7 '15 at 22:50

1

As an aside, the :required selector is not supported in IE8 and below. The :invalid selector is not supported in IE9 and below. quirksmode.org/css/selectors

– Matt Wagner
Oct 14 '15 at 14:57

2

No solution for a non-required select?

– user3494047
Nov 29 '16 at 20:03

1

@user3494047 not with this approach - the required condition is what causes the browser to apply the :invalid pseudo-class when the placeholder is selected. [value=""] won't work as a replacement because what gets updated by user interaction is the value property but that CSS syntax refers to a (non-existent) attribute.

– MattW
Nov 30 '16 at 0:56

|
show 3 more comments

6

Amazing - it was the answer at the bottom (with no upvotes yet) that was the simplest, and actually works perfectly. Thanks! Hopefully this answer will rise to the top.

– Dan Nissenbaum
May 6 '15 at 14:14

1

@DanNissenbaum I was very late to the game, plus it does need the required to work so it's no use if you want the field to be optional.

– MattW
May 7 '15 at 22:50

1

As an aside, the :required selector is not supported in IE8 and below. The :invalid selector is not supported in IE9 and below. quirksmode.org/css/selectors

– Matt Wagner
Oct 14 '15 at 14:57

2

No solution for a non-required select?

– user3494047
Nov 29 '16 at 20:03

1

@user3494047 not with this approach - the required condition is what causes the browser to apply the :invalid pseudo-class when the placeholder is selected. [value=""] won't work as a replacement because what gets updated by user interaction is the value property but that CSS syntax refers to a (non-existent) attribute.

– MattW
Nov 30 '16 at 0:56

Amazing - it was the answer at the bottom (with no upvotes yet) that was the simplest, and actually works perfectly. Thanks! Hopefully this answer will rise to the top.

– Dan Nissenbaum
May 6 '15 at 14:14

@DanNissenbaum I was very late to the game, plus it does need the required to work so it's no use if you want the field to be optional.

– MattW
May 7 '15 at 22:50

As an aside, the :required selector is not supported in IE8 and below. The :invalid selector is not supported in IE9 and below. quirksmode.org/css/selectors

– Matt Wagner
Oct 14 '15 at 14:57

No solution for a non-required select?

– user3494047
Nov 29 '16 at 20:03

@user3494047 not with this approach - the required condition is what causes the browser to apply the :invalid pseudo-class when the placeholder is selected. [value=""] won't work as a replacement because what gets updated by user interaction is the value property but that CSS syntax refers to a (non-existent) attribute.

– MattW
Nov 30 '16 at 0:56

|
show 3 more comments

Something like this maybe?

HTML:

<select id="choice">

    <option value="0" selected="selected">Choose...</option>

    <option value="1">Something</option>

    <option value="2">Something else</option>

    <option value="3">Another choice</option>

</select>

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/

edited Apr 29 '12 at 0:01

Ry-♦

169k40342359

answered Apr 27 '11 at 13:50

Albireo

8,31495384

8

this is exactly what I did recently. but I added a keyup handler so that the change also occurs when an option is selected via keyboard (using the arrows or letter shortcuts) jsfiddle.net/Zmf6t/131

– Radu
Nov 17 '11 at 12:20

this put me on the right track... however i made the value = "" (nothing between the quotes) so that the when the submit button was clicked, it still failed to validate the first option and a browser popup would appear informing you to select an option... thanks @Albireo

– Craig Wayne
Dec 17 '13 at 13:22

Why did you called the change function explicitly.

– Foreever
Jun 3 '14 at 8:57

@Foreever because I set the CSS class in the select's change event handler, so if you don't manually raise the event when the control is built the style is not applied (it will be applied only when the user manually changes the value).

– Albireo
Jun 3 '14 at 13:14

add a comment |

Something like this maybe?

HTML:

<select id="choice">

    <option value="0" selected="selected">Choose...</option>

    <option value="1">Something</option>

    <option value="2">Something else</option>

    <option value="3">Another choice</option>

</select>

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/

edited Apr 29 '12 at 0:01

Ry-♦

169k40342359

answered Apr 27 '11 at 13:50

Albireo

8,31495384

8

this is exactly what I did recently. but I added a keyup handler so that the change also occurs when an option is selected via keyboard (using the arrows or letter shortcuts) jsfiddle.net/Zmf6t/131

– Radu
Nov 17 '11 at 12:20

this put me on the right track... however i made the value = "" (nothing between the quotes) so that the when the submit button was clicked, it still failed to validate the first option and a browser popup would appear informing you to select an option... thanks @Albireo

– Craig Wayne
Dec 17 '13 at 13:22

Why did you called the change function explicitly.

– Foreever
Jun 3 '14 at 8:57

@Foreever because I set the CSS class in the select's change event handler, so if you don't manually raise the event when the control is built the style is not applied (it will be applied only when the user manually changes the value).

– Albireo
Jun 3 '14 at 13:14

add a comment |

Something like this maybe?

HTML:

<select id="choice">

    <option value="0" selected="selected">Choose...</option>

    <option value="1">Something</option>

    <option value="2">Something else</option>

    <option value="3">Another choice</option>

</select>

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/

edited Apr 29 '12 at 0:01

Ry-♦

169k40342359

answered Apr 27 '11 at 13:50

Albireo

8,31495384

Something like this maybe?

HTML:

<select id="choice">

    <option value="0" selected="selected">Choose...</option>

    <option value="1">Something</option>

    <option value="2">Something else</option>

    <option value="3">Another choice</option>

</select>

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/

edited Apr 29 '12 at 0:01

Ry-♦

169k40342359

answered Apr 27 '11 at 13:50

Albireo

8,31495384

edited Apr 29 '12 at 0:01

Ry-♦

169k40342359

edited Apr 29 '12 at 0:01

Ry-♦

169k40342359

edited Apr 29 '12 at 0:01

Ry-♦

169k40342359

answered Apr 27 '11 at 13:50

Albireo

8,31495384

answered Apr 27 '11 at 13:50

Albireo

8,31495384

answered Apr 27 '11 at 13:50

Albireo

8,31495384

8

this is exactly what I did recently. but I added a keyup handler so that the change also occurs when an option is selected via keyboard (using the arrows or letter shortcuts) jsfiddle.net/Zmf6t/131

– Radu
Nov 17 '11 at 12:20

this put me on the right track... however i made the value = "" (nothing between the quotes) so that the when the submit button was clicked, it still failed to validate the first option and a browser popup would appear informing you to select an option... thanks @Albireo

– Craig Wayne
Dec 17 '13 at 13:22

Why did you called the change function explicitly.

– Foreever
Jun 3 '14 at 8:57

@Foreever because I set the CSS class in the select's change event handler, so if you don't manually raise the event when the control is built the style is not applied (it will be applied only when the user manually changes the value).

– Albireo
Jun 3 '14 at 13:14

add a comment |

8

this is exactly what I did recently. but I added a keyup handler so that the change also occurs when an option is selected via keyboard (using the arrows or letter shortcuts) jsfiddle.net/Zmf6t/131

– Radu
Nov 17 '11 at 12:20

this put me on the right track... however i made the value = "" (nothing between the quotes) so that the when the submit button was clicked, it still failed to validate the first option and a browser popup would appear informing you to select an option... thanks @Albireo

– Craig Wayne
Dec 17 '13 at 13:22

Why did you called the change function explicitly.

– Foreever
Jun 3 '14 at 8:57

@Foreever because I set the CSS class in the select's change event handler, so if you don't manually raise the event when the control is built the style is not applied (it will be applied only when the user manually changes the value).

– Albireo
Jun 3 '14 at 13:14

this is exactly what I did recently. but I added a keyup handler so that the change also occurs when an option is selected via keyboard (using the arrows or letter shortcuts) jsfiddle.net/Zmf6t/131

– Radu
Nov 17 '11 at 12:20

this put me on the right track... however i made the value = "" (nothing between the quotes) so that the when the submit button was clicked, it still failed to validate the first option and a browser popup would appear informing you to select an option... thanks @Albireo

– Craig Wayne
Dec 17 '13 at 13:22

Why did you called the change function explicitly.

– Foreever
Jun 3 '14 at 8:57

@Foreever because I set the CSS class in the select's change event handler, so if you don't manually raise the event when the control is built the style is not applied (it will be applied only when the user manually changes the value).

– Albireo
Jun 3 '14 at 13:14

add a comment |

I just added hidden attribute in option like below, It is working fine for me.

<select>

  <option hidden>Sex</option>

  <option>Male</option>

  <option>Female</option>

</select>

edited Jul 13 '16 at 5:37

answered Jun 30 '16 at 10:42

Ajithkumar S

542411

1

Just for the record, this doesn't work for me (Chrome on Win10).

– Chris Rae
Jan 11 '17 at 19:24

But you cannot unset it. You end up choosing one but you can't reset in case if you change your mind.

– Thielicious
Aug 18 '17 at 20:19

Yeah! But inside the form anyway user has to select any one of that options. If its not a required field remove the hidden attribute then.

– Ajithkumar S
Aug 21 '17 at 3:05

add a comment |

I just added hidden attribute in option like below, It is working fine for me.

<select>

  <option hidden>Sex</option>

  <option>Male</option>

  <option>Female</option>

</select>

edited Jul 13 '16 at 5:37

answered Jun 30 '16 at 10:42

Ajithkumar S

542411

1

Just for the record, this doesn't work for me (Chrome on Win10).

– Chris Rae
Jan 11 '17 at 19:24

But you cannot unset it. You end up choosing one but you can't reset in case if you change your mind.

– Thielicious
Aug 18 '17 at 20:19

Yeah! But inside the form anyway user has to select any one of that options. If its not a required field remove the hidden attribute then.

– Ajithkumar S
Aug 21 '17 at 3:05

add a comment |

I just added hidden attribute in option like below, It is working fine for me.

<select>

  <option hidden>Sex</option>

  <option>Male</option>

  <option>Female</option>

</select>

edited Jul 13 '16 at 5:37

answered Jun 30 '16 at 10:42

Ajithkumar S

542411

I just added hidden attribute in option like below, It is working fine for me.

<select>

  <option hidden>Sex</option>

  <option>Male</option>

  <option>Female</option>

</select>

<select>

  <option hidden>Sex</option>

  <option>Male</option>

  <option>Female</option>

</select>

<select>

  <option hidden>Sex</option>

  <option>Male</option>

  <option>Female</option>

</select>

edited Jul 13 '16 at 5:37

answered Jun 30 '16 at 10:42

Ajithkumar S

542411

edited Jul 13 '16 at 5:37

answered Jun 30 '16 at 10:42

Ajithkumar S

542411

answered Jun 30 '16 at 10:42

Ajithkumar S

542411

answered Jun 30 '16 at 10:42

Ajithkumar S

542411

1

Just for the record, this doesn't work for me (Chrome on Win10).

– Chris Rae
Jan 11 '17 at 19:24

But you cannot unset it. You end up choosing one but you can't reset in case if you change your mind.

– Thielicious
Aug 18 '17 at 20:19

Yeah! But inside the form anyway user has to select any one of that options. If its not a required field remove the hidden attribute then.

– Ajithkumar S
Aug 21 '17 at 3:05

add a comment |

1

Just for the record, this doesn't work for me (Chrome on Win10).

– Chris Rae
Jan 11 '17 at 19:24

But you cannot unset it. You end up choosing one but you can't reset in case if you change your mind.

– Thielicious
Aug 18 '17 at 20:19

Yeah! But inside the form anyway user has to select any one of that options. If its not a required field remove the hidden attribute then.

– Ajithkumar S
Aug 21 '17 at 3:05

Just for the record, this doesn't work for me (Chrome on Win10).

– Chris Rae
Jan 11 '17 at 19:24

But you cannot unset it. You end up choosing one but you can't reset in case if you change your mind.

– Thielicious
Aug 18 '17 at 20:19

Yeah! But inside the form anyway user has to select any one of that options. If its not a required field remove the hidden attribute then.

– Ajithkumar S
Aug 21 '17 at 3:05

add a comment |

That solution works in FireFox also:

Without any JS.

option[default] {

  display: none;

}

<select>

  <option value="" default selected>Select Your Age</option>

  <option value="1">1</option>

  <option value="2">2</option>

  <option value="3">3</option>

  <option value="4">4</option>

</select>

edited May 12 '15 at 15:40

Ruslan López

2,91911527

answered Feb 12 '14 at 8:24

Dani-Br

1,07121627

add a comment |

That solution works in FireFox also:

Without any JS.

option[default] {

  display: none;

}

<select>

  <option value="" default selected>Select Your Age</option>

  <option value="1">1</option>

  <option value="2">2</option>

  <option value="3">3</option>

  <option value="4">4</option>

</select>

edited May 12 '15 at 15:40

Ruslan López

2,91911527

answered Feb 12 '14 at 8:24

Dani-Br

1,07121627

add a comment |

That solution works in FireFox also:

Without any JS.

option[default] {

  display: none;

}

<select>

  <option value="" default selected>Select Your Age</option>

  <option value="1">1</option>

  <option value="2">2</option>

  <option value="3">3</option>

  <option value="4">4</option>

</select>

edited May 12 '15 at 15:40

Ruslan López

2,91911527

answered Feb 12 '14 at 8:24

Dani-Br

1,07121627

That solution works in FireFox also:

Without any JS.

option[default] {

  display: none;

}

<select>

  <option value="" default selected>Select Your Age</option>

  <option value="1">1</option>

  <option value="2">2</option>

  <option value="3">3</option>

  <option value="4">4</option>

</select>

option[default] {

  display: none;

}

<select>

  <option value="" default selected>Select Your Age</option>

  <option value="1">1</option>

  <option value="2">2</option>

  <option value="3">3</option>

  <option value="4">4</option>

</select>

option[default] {

  display: none;

}

<select>

  <option value="" default selected>Select Your Age</option>

  <option value="1">1</option>

  <option value="2">2</option>

  <option value="3">3</option>

  <option value="4">4</option>

</select>

edited May 12 '15 at 15:40

Ruslan López

2,91911527

answered Feb 12 '14 at 8:24

Dani-Br

1,07121627

edited May 12 '15 at 15:40

Ruslan López

2,91911527

edited May 12 '15 at 15:40

Ruslan López

2,91911527

edited May 12 '15 at 15:40

Ruslan López

2,91911527

answered Feb 12 '14 at 8:24

Dani-Br

1,07121627

answered Feb 12 '14 at 8:24

Dani-Br

1,07121627

answered Feb 12 '14 at 8:24

Dani-Br

1,07121627

add a comment |

<select class="place_holder dropdown">

    <option selected="selected" style=" display: none;">Sort by</option>

    <option>two</option>

    <option>something</option>

    <option>4</option>

    <option>5</option>

</select>

CSS:

.place_holder{

    color: gray;

}

option{

    color: #000000;

}

JS:

jQuery(".dropdown").change(function () {

    jQuery(this).removeClass("place_holder");

});

After customer makes first select no need for gray color so JS removes the class place_holder.
I hope this helps someone :)

Update: Thanks to @user1096901, as a work around for IE browser, you can add place_holder class again in case first option is selected again :)

edited Jan 18 '16 at 16:21

falsarella

9,72545293

answered Aug 11 '14 at 5:00

rramiii

65241127

2

In some browsers he can still select the display:none option, becouse it is not hidden.

– Srneczek
Aug 21 '14 at 11:33

2

you are right I faced this in IE browser

– rramiii
Aug 30 '14 at 17:53

The work around for this is to add "place_holder" class again in case first option is selected :)

– rramiii
Nov 27 '14 at 10:09

add a comment |

<select class="place_holder dropdown">

    <option selected="selected" style=" display: none;">Sort by</option>

    <option>two</option>

    <option>something</option>

    <option>4</option>

    <option>5</option>

</select>

CSS:

.place_holder{

    color: gray;

}

option{

    color: #000000;

}

JS:

jQuery(".dropdown").change(function () {

    jQuery(this).removeClass("place_holder");

});

After customer makes first select no need for gray color so JS removes the class place_holder.
I hope this helps someone :)

Update: Thanks to @user1096901, as a work around for IE browser, you can add place_holder class again in case first option is selected again :)

edited Jan 18 '16 at 16:21

falsarella

9,72545293

answered Aug 11 '14 at 5:00

rramiii

65241127

2

In some browsers he can still select the display:none option, becouse it is not hidden.

– Srneczek
Aug 21 '14 at 11:33

2

you are right I faced this in IE browser

– rramiii
Aug 30 '14 at 17:53

The work around for this is to add "place_holder" class again in case first option is selected :)

– rramiii
Nov 27 '14 at 10:09

add a comment |

<select class="place_holder dropdown">

    <option selected="selected" style=" display: none;">Sort by</option>

    <option>two</option>

    <option>something</option>

    <option>4</option>

    <option>5</option>

</select>

CSS:

.place_holder{

    color: gray;

}

option{

    color: #000000;

}

JS:

jQuery(".dropdown").change(function () {

    jQuery(this).removeClass("place_holder");

});

After customer makes first select no need for gray color so JS removes the class place_holder.
I hope this helps someone :)

Update: Thanks to @user1096901, as a work around for IE browser, you can add place_holder class again in case first option is selected again :)

edited Jan 18 '16 at 16:21

falsarella

9,72545293

answered Aug 11 '14 at 5:00

rramiii

65241127

<select class="place_holder dropdown">

    <option selected="selected" style=" display: none;">Sort by</option>

    <option>two</option>

    <option>something</option>

    <option>4</option>

    <option>5</option>

</select>

CSS:

.place_holder{

    color: gray;

}

option{

    color: #000000;

}

JS:

jQuery(".dropdown").change(function () {

    jQuery(this).removeClass("place_holder");

});

After customer makes first select no need for gray color so JS removes the class place_holder.
I hope this helps someone :)

Update: Thanks to @user1096901, as a work around for IE browser, you can add place_holder class again in case first option is selected again :)

edited Jan 18 '16 at 16:21

falsarella

9,72545293

answered Aug 11 '14 at 5:00

rramiii

65241127

edited Jan 18 '16 at 16:21

falsarella

9,72545293

edited Jan 18 '16 at 16:21

falsarella

9,72545293

edited Jan 18 '16 at 16:21

falsarella

9,72545293

answered Aug 11 '14 at 5:00

rramiii

65241127

answered Aug 11 '14 at 5:00

rramiii

65241127

answered Aug 11 '14 at 5:00

rramiii

65241127

2

In some browsers he can still select the display:none option, becouse it is not hidden.

– Srneczek
Aug 21 '14 at 11:33

2

you are right I faced this in IE browser

– rramiii
Aug 30 '14 at 17:53

The work around for this is to add "place_holder" class again in case first option is selected :)

– rramiii
Nov 27 '14 at 10:09

add a comment |

2

In some browsers he can still select the display:none option, becouse it is not hidden.

– Srneczek
Aug 21 '14 at 11:33

2

you are right I faced this in IE browser

– rramiii
Aug 30 '14 at 17:53

The work around for this is to add "place_holder" class again in case first option is selected :)

– rramiii
Nov 27 '14 at 10:09

In some browsers he can still select the display:none option, becouse it is not hidden.

– Srneczek
Aug 21 '14 at 11:33

you are right I faced this in IE browser

– rramiii
Aug 30 '14 at 17:53

The work around for this is to add "place_holder" class again in case first option is selected :)

– rramiii
Nov 27 '14 at 10:09

add a comment |

There's no need for any JS or CSS, just 3 attributes:

<select>

    <option selected disabled hidden>Default Value</option>

    <option>Value 1</option>

    <option>Value 2</option>

    <option>Value 3</option>

    <option>Value 4</option>

</select>

it doesn't show the option at all, 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:

<!DOCTYPE html>

<html>

<head>

<title>Placeholder for select tag drop-down menu</title>

</head>



<body onload="document.getElementById('mySelect').selectedIndex = 0">



<select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'"  style="color: gray; width: 150px;">

  <option value="" hidden>Select your beverage</option> <!-- placeholder -->

  <option value="water" style="color:black" >Water</option>

  <option value="milk" style="color:black" >Milk</option>

  <option value="soda" style="color:black" >Soda</option>

</select>



</body>

</html>

Obviously, you can separated the functions and at least the select's CSS into separate files.

Note: the onload function corrects a refresh bug.

edited Feb 28 '18 at 11:54

Rob Atwater

answered Feb 24 '18 at 7:54

Jacob Schneider

466317

This doesn't work if the hidden option is the only one

– Eridanis
Feb 27 '18 at 11:12

but why would you have a drop down menu with only one option?

– Jacob Schneider
Mar 1 '18 at 6:09

I have a tabbed pop-up and the drop down menu from tab3 takes input from tab2, which it displays. Your answer is good and this is a corner case, but I would have expected the default value to show up as the first option, instead you get a blank drop down. See here: jsfiddle.net/n66L7sza

– Eridanis
Mar 1 '18 at 9:50

That is a good point, in which case you could scan the length of the dropdown, if it's zero, then remove the hidden attribute

– Jacob Schneider
Mar 1 '18 at 10:28

This doesn't seem to work correctly on Google Chrome 65.0.3325.181 on MacOS, it doesn't show the hidden entry and picks the one below it.

– Jamie H
Apr 7 '18 at 22:29

|
show 1 more comment

There's no need for any JS or CSS, just 3 attributes:

<select>

    <option selected disabled hidden>Default Value</option>

    <option>Value 1</option>

    <option>Value 2</option>

    <option>Value 3</option>

    <option>Value 4</option>

</select>

it doesn't show the option at all, 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:

<!DOCTYPE html>

<html>

<head>

<title>Placeholder for select tag drop-down menu</title>

</head>



<body onload="document.getElementById('mySelect').selectedIndex = 0">



<select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'"  style="color: gray; width: 150px;">

  <option value="" hidden>Select your beverage</option> <!-- placeholder -->

  <option value="water" style="color:black" >Water</option>

  <option value="milk" style="color:black" >Milk</option>

  <option value="soda" style="color:black" >Soda</option>

</select>



</body>

</html>

Obviously, you can separated the functions and at least the select's CSS into separate files.

Note: the onload function corrects a refresh bug.

edited Feb 28 '18 at 11:54

Rob Atwater

answered Feb 24 '18 at 7:54

Jacob Schneider

466317

This doesn't work if the hidden option is the only one

– Eridanis
Feb 27 '18 at 11:12

but why would you have a drop down menu with only one option?

– Jacob Schneider
Mar 1 '18 at 6:09

I have a tabbed pop-up and the drop down menu from tab3 takes input from tab2, which it displays. Your answer is good and this is a corner case, but I would have expected the default value to show up as the first option, instead you get a blank drop down. See here: jsfiddle.net/n66L7sza

– Eridanis
Mar 1 '18 at 9:50

That is a good point, in which case you could scan the length of the dropdown, if it's zero, then remove the hidden attribute

– Jacob Schneider
Mar 1 '18 at 10:28

This doesn't seem to work correctly on Google Chrome 65.0.3325.181 on MacOS, it doesn't show the hidden entry and picks the one below it.

– Jamie H
Apr 7 '18 at 22:29

|
show 1 more comment

There's no need for any JS or CSS, just 3 attributes:

<select>

    <option selected disabled hidden>Default Value</option>

    <option>Value 1</option>

    <option>Value 2</option>

    <option>Value 3</option>

    <option>Value 4</option>

</select>

it doesn't show the option at all, 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:

<!DOCTYPE html>

<html>

<head>

<title>Placeholder for select tag drop-down menu</title>

</head>



<body onload="document.getElementById('mySelect').selectedIndex = 0">



<select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'"  style="color: gray; width: 150px;">

  <option value="" hidden>Select your beverage</option> <!-- placeholder -->

  <option value="water" style="color:black" >Water</option>

  <option value="milk" style="color:black" >Milk</option>

  <option value="soda" style="color:black" >Soda</option>

</select>



</body>

</html>

Obviously, you can separated the functions and at least the select's CSS into separate files.

Note: the onload function corrects a refresh bug.

edited Feb 28 '18 at 11:54

Rob Atwater

answered Feb 24 '18 at 7:54

Jacob Schneider

466317

There's no need for any JS or CSS, just 3 attributes:

<select>

    <option selected disabled hidden>Default Value</option>

    <option>Value 1</option>

    <option>Value 2</option>

    <option>Value 3</option>

    <option>Value 4</option>

</select>

it doesn't show the option at all, 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:

<!DOCTYPE html>

<html>

<head>

<title>Placeholder for select tag drop-down menu</title>

</head>



<body onload="document.getElementById('mySelect').selectedIndex = 0">



<select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'"  style="color: gray; width: 150px;">

  <option value="" hidden>Select your beverage</option> <!-- placeholder -->

  <option value="water" style="color:black" >Water</option>

  <option value="milk" style="color:black" >Milk</option>

  <option value="soda" style="color:black" >Soda</option>

</select>



</body>

</html>

Obviously, you can separated the functions and at least the select's CSS into separate files.

Note: the onload function corrects a refresh bug.

edited Feb 28 '18 at 11:54

Rob Atwater

answered Feb 24 '18 at 7:54

Jacob Schneider

466317

edited Feb 28 '18 at 11:54

Rob Atwater

edited Feb 28 '18 at 11:54

Rob Atwater

edited Feb 28 '18 at 11:54

Rob Atwater

answered Feb 24 '18 at 7:54

Jacob Schneider

466317

answered Feb 24 '18 at 7:54

Jacob Schneider

466317

answered Feb 24 '18 at 7:54

Jacob Schneider

466317

This doesn't work if the hidden option is the only one

– Eridanis
Feb 27 '18 at 11:12

but why would you have a drop down menu with only one option?

– Jacob Schneider
Mar 1 '18 at 6:09

I have a tabbed pop-up and the drop down menu from tab3 takes input from tab2, which it displays. Your answer is good and this is a corner case, but I would have expected the default value to show up as the first option, instead you get a blank drop down. See here: jsfiddle.net/n66L7sza

– Eridanis
Mar 1 '18 at 9:50

That is a good point, in which case you could scan the length of the dropdown, if it's zero, then remove the hidden attribute

– Jacob Schneider
Mar 1 '18 at 10:28

This doesn't seem to work correctly on Google Chrome 65.0.3325.181 on MacOS, it doesn't show the hidden entry and picks the one below it.

– Jamie H
Apr 7 '18 at 22:29

|
show 1 more comment

This doesn't work if the hidden option is the only one

– Eridanis
Feb 27 '18 at 11:12

but why would you have a drop down menu with only one option?

– Jacob Schneider
Mar 1 '18 at 6:09

I have a tabbed pop-up and the drop down menu from tab3 takes input from tab2, which it displays. Your answer is good and this is a corner case, but I would have expected the default value to show up as the first option, instead you get a blank drop down. See here: jsfiddle.net/n66L7sza

– Eridanis
Mar 1 '18 at 9:50

That is a good point, in which case you could scan the length of the dropdown, if it's zero, then remove the hidden attribute

– Jacob Schneider
Mar 1 '18 at 10:28

This doesn't seem to work correctly on Google Chrome 65.0.3325.181 on MacOS, it doesn't show the hidden entry and picks the one below it.

– Jamie H
Apr 7 '18 at 22:29

This doesn't work if the hidden option is the only one

– Eridanis
Feb 27 '18 at 11:12

but why would you have a drop down menu with only one option?

– Jacob Schneider
Mar 1 '18 at 6:09

I have a tabbed pop-up and the drop down menu from tab3 takes input from tab2, which it displays. Your answer is good and this is a corner case, but I would have expected the default value to show up as the first option, instead you get a blank drop down. See here: jsfiddle.net/n66L7sza

– Eridanis
Mar 1 '18 at 9:50

That is a good point, in which case you could scan the length of the dropdown, if it's zero, then remove the hidden attribute

– Jacob Schneider
Mar 1 '18 at 10:28

This doesn't seem to work correctly on Google Chrome 65.0.3325.181 on MacOS, it doesn't show the hidden entry and picks the one below it.

– Jamie H
Apr 7 '18 at 22:29

|
show 1 more comment

I see signs of correct answers but to bring it all together this would be my solution.

select{

  color: grey;

}



option {

  color: black;

}



option[default] {

   display: none;

}

<select>

    <option value="" default selected>Select your option</option>

    <option value="hurr">Durr</option>

</select>

edited Mar 17 '16 at 16:57

Eric G

2,03322341

answered Apr 10 '14 at 16:50

user3520445

13515

4

Durr is in gray after you select it. This forces the closed select box to be gray always.

– Chloe
Sep 25 '17 at 4:29

add a comment |

I see signs of correct answers but to bring it all together this would be my solution.

select{

  color: grey;

}



option {

  color: black;

}



option[default] {

   display: none;

}

<select>

    <option value="" default selected>Select your option</option>

    <option value="hurr">Durr</option>

</select>

edited Mar 17 '16 at 16:57

Eric G

2,03322341

answered Apr 10 '14 at 16:50

user3520445

13515

4

Durr is in gray after you select it. This forces the closed select box to be gray always.

– Chloe
Sep 25 '17 at 4:29

add a comment |

I see signs of correct answers but to bring it all together this would be my solution.

select{

  color: grey;

}



option {

  color: black;

}



option[default] {

   display: none;

}

<select>

    <option value="" default selected>Select your option</option>

    <option value="hurr">Durr</option>

</select>

edited Mar 17 '16 at 16:57

Eric G

2,03322341

answered Apr 10 '14 at 16:50

user3520445

13515

I see signs of correct answers but to bring it all together this would be my solution.

select{

  color: grey;

}



option {

  color: black;

}



option[default] {

   display: none;

}

<select>

    <option value="" default selected>Select your option</option>

    <option value="hurr">Durr</option>

</select>

select{

  color: grey;

}



option {

  color: black;

}



option[default] {

   display: none;

}

<select>

    <option value="" default selected>Select your option</option>

    <option value="hurr">Durr</option>

</select>

select{

  color: grey;

}



option {

  color: black;

}



option[default] {

   display: none;

}

<select>

    <option value="" default selected>Select your option</option>

    <option value="hurr">Durr</option>

</select>

edited Mar 17 '16 at 16:57

Eric G

2,03322341

answered Apr 10 '14 at 16:50

user3520445

13515

edited Mar 17 '16 at 16:57

Eric G

2,03322341

edited Mar 17 '16 at 16:57

Eric G

2,03322341

edited Mar 17 '16 at 16:57

Eric G

2,03322341

answered Apr 10 '14 at 16:50

user3520445

13515

answered Apr 10 '14 at 16:50

user3520445

13515

answered Apr 10 '14 at 16:50

user3520445

13515

4

Durr is in gray after you select it. This forces the closed select box to be gray always.

– Chloe
Sep 25 '17 at 4:29

add a comment |

4

Durr is in gray after you select it. This forces the closed select box to be gray always.

– Chloe
Sep 25 '17 at 4:29

Durr is in gray after you select it. This forces the closed select box to be gray always.

– Chloe
Sep 25 '17 at 4:29

add a comment |

here is mine

select:focus option.holder {

  display: none;

}

<select>

    <option selected="selected" class="holder">Please select</option>

    <option value="1">Option #1</option>

    <option value="2">Option #2</option>



</select>

answered Nov 15 '16 at 6:00

Will Wang

42756

You could just add <option value="" selected disabled>Please select</option> as the first option.

– sstauross
Jan 4 '17 at 14:49

Wow. This is excellent!

– Georgy Ivanov
Jul 18 '17 at 7:53

It doesn't make the placeholder light gray.

– Chloe
Sep 25 '17 at 4:31

add a comment |

here is mine

select:focus option.holder {

  display: none;

}

<select>

    <option selected="selected" class="holder">Please select</option>

    <option value="1">Option #1</option>

    <option value="2">Option #2</option>



</select>

answered Nov 15 '16 at 6:00

Will Wang

42756

You could just add <option value="" selected disabled>Please select</option> as the first option.

– sstauross
Jan 4 '17 at 14:49

Wow. This is excellent!

– Georgy Ivanov
Jul 18 '17 at 7:53

It doesn't make the placeholder light gray.

– Chloe
Sep 25 '17 at 4:31

add a comment |

here is mine

select:focus option.holder {

  display: none;

}

<select>

    <option selected="selected" class="holder">Please select</option>

    <option value="1">Option #1</option>

    <option value="2">Option #2</option>



</select>

answered Nov 15 '16 at 6:00

Will Wang

42756

here is mine

select:focus option.holder {

  display: none;

}

<select>

    <option selected="selected" class="holder">Please select</option>

    <option value="1">Option #1</option>

    <option value="2">Option #2</option>



</select>

select:focus option.holder {

  display: none;

}

<select>

    <option selected="selected" class="holder">Please select</option>

    <option value="1">Option #1</option>

    <option value="2">Option #2</option>



</select>

select:focus option.holder {

  display: none;

}

<select>

    <option selected="selected" class="holder">Please select</option>

    <option value="1">Option #1</option>

    <option value="2">Option #2</option>



</select>

answered Nov 15 '16 at 6:00

Will Wang

42756

answered Nov 15 '16 at 6:00

Will Wang

42756

answered Nov 15 '16 at 6:00

Will Wang

42756

answered Nov 15 '16 at 6:00

Will Wang

42756

You could just add <option value="" selected disabled>Please select</option> as the first option.

– sstauross
Jan 4 '17 at 14:49

Wow. This is excellent!

– Georgy Ivanov
Jul 18 '17 at 7:53

It doesn't make the placeholder light gray.

– Chloe
Sep 25 '17 at 4:31

add a comment |

You could just add <option value="" selected disabled>Please select</option> as the first option.

– sstauross
Jan 4 '17 at 14:49

Wow. This is excellent!

– Georgy Ivanov
Jul 18 '17 at 7:53

It doesn't make the placeholder light gray.

– Chloe
Sep 25 '17 at 4:31

You could just add <option value="" selected disabled>Please select</option> as the first option.

– sstauross
Jan 4 '17 at 14:49

Wow. This is excellent!

– Georgy Ivanov
Jul 18 '17 at 7:53

It doesn't make the placeholder light gray.

– Chloe
Sep 25 '17 at 4:31

add a comment |

<select>

    <option value="" disabled selected hidden>Select your option</option>

    <option value="hurr">Durr</option>

</select>

edited May 7 '18 at 8:27

answered May 6 '18 at 14:40

Nawaraj

167112

Please add a bit more information explaining how this differs from the accepted answer, and why it might be preferable.

– bgran
May 6 '18 at 15:05

I have updated why it differs from accepted answer.

– Nawaraj
May 6 '18 at 15:12

Thanks for the update, but the answer still doesn't explain why it looks different. For example, this answer prevents the "Select your option" option from being re-selecting after the "Durr" option is selected. Which attribute causes this behavior?

– bgran
May 6 '18 at 16:09

@bgran I hope this will help.

– Nawaraj
May 7 '18 at 8:29

add a comment |

<select>

    <option value="" disabled selected hidden>Select your option</option>

    <option value="hurr">Durr</option>

</select>

edited May 7 '18 at 8:27

answered May 6 '18 at 14:40

Nawaraj

167112

Please add a bit more information explaining how this differs from the accepted answer, and why it might be preferable.

– bgran
May 6 '18 at 15:05

I have updated why it differs from accepted answer.

– Nawaraj
May 6 '18 at 15:12

Thanks for the update, but the answer still doesn't explain why it looks different. For example, this answer prevents the "Select your option" option from being re-selecting after the "Durr" option is selected. Which attribute causes this behavior?

– bgran
May 6 '18 at 16:09

@bgran I hope this will help.

– Nawaraj
May 7 '18 at 8:29

add a comment |

<select>

    <option value="" disabled selected hidden>Select your option</option>

    <option value="hurr">Durr</option>

</select>

edited May 7 '18 at 8:27

answered May 6 '18 at 14:40

Nawaraj

167112

<select>

    <option value="" disabled selected hidden>Select your option</option>

    <option value="hurr">Durr</option>

</select>

<select>

    <option value="" disabled selected hidden>Select your option</option>

    <option value="hurr">Durr</option>

</select>

<select>

    <option value="" disabled selected hidden>Select your option</option>

    <option value="hurr">Durr</option>

</select>

edited May 7 '18 at 8:27

answered May 6 '18 at 14:40

Nawaraj

167112

edited May 7 '18 at 8:27

answered May 6 '18 at 14:40

Nawaraj

167112

answered May 6 '18 at 14:40

Nawaraj

167112

answered May 6 '18 at 14:40

Nawaraj

167112

Please add a bit more information explaining how this differs from the accepted answer, and why it might be preferable.

– bgran
May 6 '18 at 15:05

I have updated why it differs from accepted answer.

– Nawaraj
May 6 '18 at 15:12

Thanks for the update, but the answer still doesn't explain why it looks different. For example, this answer prevents the "Select your option" option from being re-selecting after the "Durr" option is selected. Which attribute causes this behavior?

– bgran
May 6 '18 at 16:09

@bgran I hope this will help.

– Nawaraj
May 7 '18 at 8:29

add a comment |

Please add a bit more information explaining how this differs from the accepted answer, and why it might be preferable.

– bgran
May 6 '18 at 15:05

I have updated why it differs from accepted answer.

– Nawaraj
May 6 '18 at 15:12

Thanks for the update, but the answer still doesn't explain why it looks different. For example, this answer prevents the "Select your option" option from being re-selecting after the "Durr" option is selected. Which attribute causes this behavior?

– bgran
May 6 '18 at 16:09

@bgran I hope this will help.

– Nawaraj
May 7 '18 at 8:29

Please add a bit more information explaining how this differs from the accepted answer, and why it might be preferable.

– bgran
May 6 '18 at 15:05

I have updated why it differs from accepted answer.

– Nawaraj
May 6 '18 at 15:12

Thanks for the update, but the answer still doesn't explain why it looks different. For example, this answer prevents the "Select your option" option from being re-selecting after the "Durr" option is selected. Which attribute causes this behavior?

– bgran
May 6 '18 at 16:09

@bgran I hope this will help.

– Nawaraj
May 7 '18 at 8:29

add a comment |

Another possibility in JS:

 $('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

answered Jul 21 '14 at 17:14

Jean-philippe Emond

9731825

add a comment |

Another possibility in JS:

 $('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

answered Jul 21 '14 at 17:14

Jean-philippe Emond

9731825

add a comment |

Another possibility in JS:

 $('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

answered Jul 21 '14 at 17:14

Jean-philippe Emond

9731825

Another possibility in JS:

 $('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

answered Jul 21 '14 at 17:14

Jean-philippe Emond

9731825

answered Jul 21 '14 at 17:14

Jean-philippe Emond

9731825

answered Jul 21 '14 at 17:14

Jean-philippe Emond

9731825

answered Jul 21 '14 at 17:14

Jean-philippe Emond

9731825

add a comment |

If you are using angular go like this

<select>

    <option [ngValue]="undefined"  disabled selected>Select your option</option>

    <option [ngValue]="hurr">Durr</option>

</select>

answered Aug 29 '18 at 9:06

arun kumar

235312

You could add the hidden attribute so that option isn't displayed when opening the select. But thanks any way for that answer, it worked for me.

– dcg
Dec 27 '18 at 22:48

add a comment |

If you are using angular go like this

<select>

    <option [ngValue]="undefined"  disabled selected>Select your option</option>

    <option [ngValue]="hurr">Durr</option>

</select>

answered Aug 29 '18 at 9:06

arun kumar

235312

You could add the hidden attribute so that option isn't displayed when opening the select. But thanks any way for that answer, it worked for me.

– dcg
Dec 27 '18 at 22:48

add a comment |

If you are using angular go like this

<select>

    <option [ngValue]="undefined"  disabled selected>Select your option</option>

    <option [ngValue]="hurr">Durr</option>

</select>

answered Aug 29 '18 at 9:06

arun kumar

235312

If you are using angular go like this

<select>

    <option [ngValue]="undefined"  disabled selected>Select your option</option>

    <option [ngValue]="hurr">Durr</option>

</select>

<select>

    <option [ngValue]="undefined"  disabled selected>Select your option</option>

    <option [ngValue]="hurr">Durr</option>

</select>

<select>

    <option [ngValue]="undefined"  disabled selected>Select your option</option>

    <option [ngValue]="hurr">Durr</option>

</select>

answered Aug 29 '18 at 9:06

arun kumar

235312

answered Aug 29 '18 at 9:06

arun kumar

235312

answered Aug 29 '18 at 9:06

arun kumar

235312

answered Aug 29 '18 at 9:06

arun kumar

235312

You could add the hidden attribute so that option isn't displayed when opening the select. But thanks any way for that answer, it worked for me.

– dcg
Dec 27 '18 at 22:48

add a comment |

You could add the hidden attribute so that option isn't displayed when opening the select. But thanks any way for that answer, it worked for me.

– dcg
Dec 27 '18 at 22:48

You could add the hidden attribute so that option isn't displayed when opening the select. But thanks any way for that answer, it worked for me.

– dcg
Dec 27 '18 at 22:48

add a comment |

select:not(:valid){

  color: #999;

}

<select required>

        <option value="" hidden>Select your option</option>

        <option value="0">First option</option>

        <option value="1">Second option</option>

    </select>

answered Oct 5 '18 at 8:03

Roman Yakoviv

513514

1

or select:invalid is also valid.

– elquimista
Oct 18 '18 at 22:03

add a comment |

select:not(:valid){

  color: #999;

}

<select required>

        <option value="" hidden>Select your option</option>

        <option value="0">First option</option>

        <option value="1">Second option</option>

    </select>

answered Oct 5 '18 at 8:03

Roman Yakoviv

513514

1

or select:invalid is also valid.

– elquimista
Oct 18 '18 at 22:03

add a comment |

select:not(:valid){

  color: #999;

}

<select required>

        <option value="" hidden>Select your option</option>

        <option value="0">First option</option>

        <option value="1">Second option</option>

    </select>

answered Oct 5 '18 at 8:03

Roman Yakoviv

513514

select:not(:valid){

  color: #999;

}

<select required>

        <option value="" hidden>Select your option</option>

        <option value="0">First option</option>

        <option value="1">Second option</option>

    </select>

select:not(:valid){

  color: #999;

}

<select required>

        <option value="" hidden>Select your option</option>

        <option value="0">First option</option>

        <option value="1">Second option</option>

    </select>

select:not(:valid){

  color: #999;

}

<select required>

        <option value="" hidden>Select your option</option>

        <option value="0">First option</option>

        <option value="1">Second option</option>

    </select>

answered Oct 5 '18 at 8:03

Roman Yakoviv

513514

answered Oct 5 '18 at 8:03

Roman Yakoviv

513514

answered Oct 5 '18 at 8:03

Roman Yakoviv

513514

answered Oct 5 '18 at 8:03

Roman Yakoviv

513514

1

or select:invalid is also valid.

– elquimista
Oct 18 '18 at 22:03

add a comment |

1

or select:invalid is also valid.

– elquimista
Oct 18 '18 at 22:03

or select:invalid is also valid.

– elquimista
Oct 18 '18 at 22:03

add a comment |

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:

var $selects = $('select');

$selects.change(function () {

  var option = $('option:default', this);

  if(option && option.is(':selected')){

          $(this).css('color','#999');

  }

  else{

          $(this).css('color','#555');

  }

});



$selects.each(function(){

  $(this).change();

});

option{

    color: #555;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="in-op">

    <option default selected>Select Option</option>

    <option>Option 1</option>

    <option>Option 2</option>

    <option>Option 3</option>

</select>

answered Jun 13 '17 at 21:34

Eric G

2,03322341

Thanks, this was the best for me, as you said... the select element is required.

– Mousa Alfhaily
Nov 20 '18 at 0:11

add a comment |

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:

var $selects = $('select');

$selects.change(function () {

  var option = $('option:default', this);

  if(option && option.is(':selected')){

          $(this).css('color','#999');

  }

  else{

          $(this).css('color','#555');

  }

});



$selects.each(function(){

  $(this).change();

});

option{

    color: #555;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="in-op">

    <option default selected>Select Option</option>

    <option>Option 1</option>

    <option>Option 2</option>

    <option>Option 3</option>

</select>

answered Jun 13 '17 at 21:34

Eric G

2,03322341

Thanks, this was the best for me, as you said... the select element is required.

– Mousa Alfhaily
Nov 20 '18 at 0:11

add a comment |

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:

var $selects = $('select');

$selects.change(function () {

  var option = $('option:default', this);

  if(option && option.is(':selected')){

          $(this).css('color','#999');

  }

  else{

          $(this).css('color','#555');

  }

});



$selects.each(function(){

  $(this).change();

});

option{

    color: #555;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="in-op">

    <option default selected>Select Option</option>

    <option>Option 1</option>

    <option>Option 2</option>

    <option>Option 3</option>

</select>

answered Jun 13 '17 at 21:34

Eric G

2,03322341

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:

var $selects = $('select');

$selects.change(function () {

  var option = $('option:default', this);

  if(option && option.is(':selected')){

          $(this).css('color','#999');

  }

  else{

          $(this).css('color','#555');

  }

});



$selects.each(function(){

  $(this).change();

});

option{

    color: #555;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="in-op">

    <option default selected>Select Option</option>

    <option>Option 1</option>

    <option>Option 2</option>

    <option>Option 3</option>

</select>

var $selects = $('select');

$selects.change(function () {

  var option = $('option:default', this);

  if(option && option.is(':selected')){

          $(this).css('color','#999');

  }

  else{

          $(this).css('color','#555');

  }

});



$selects.each(function(){

  $(this).change();

});

option{

    color: #555;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="in-op">

    <option default selected>Select Option</option>

    <option>Option 1</option>

    <option>Option 2</option>

    <option>Option 3</option>

</select>

var $selects = $('select');

$selects.change(function () {

  var option = $('option:default', this);

  if(option && option.is(':selected')){

          $(this).css('color','#999');

  }

  else{

          $(this).css('color','#555');

  }

});



$selects.each(function(){

  $(this).change();

});

option{

    color: #555;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="in-op">

    <option default selected>Select Option</option>

    <option>Option 1</option>

    <option>Option 2</option>

    <option>Option 3</option>

</select>

answered Jun 13 '17 at 21:34

Eric G

2,03322341

answered Jun 13 '17 at 21:34

Eric G

2,03322341

answered Jun 13 '17 at 21:34

Eric G

2,03322341

answered Jun 13 '17 at 21:34

Eric G

2,03322341

Thanks, this was the best for me, as you said... the select element is required.

– Mousa Alfhaily
Nov 20 '18 at 0:11

add a comment |

Thanks, this was the best for me, as you said... the select element is required.

– Mousa Alfhaily
Nov 20 '18 at 0:11

Thanks, this was the best for me, as you said... the select element is required.

– Mousa Alfhaily
Nov 20 '18 at 0:11

add a comment |

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 b/c 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)

var app = angular.module("soDemo", );

app.controller("soDemoController", function($scope) {

  var vm = {};

  vm.names = [{

      id: 1,

      name: 'Jon'

    },

    {

      id: 2,

      name: 'Joe'

    }, {

      id: 3,

      name: 'Bob'

    }, {

      id: 4,

      name: 'Jane'

    }

  ];

  vm.nameId;

  $scope.vm = vm;

});



app.directive('soSelect', function soSelect() {

  var directive = {

    restrict: 'E',

    require: 'ngModel',

    scope: {

      'valueProperty': '@',

      'displayProperty': '@',

      'modelProperty': '=',

      'source': '=',

    },

    link: link,

    template: getTemplate

  };

  return directive;



  /////////////////////////////////

  function link(scope, element, attrs, ngModelController) {

    init();

    return;



    ///////////// IMPLEMENTATION



    function init() {

      initDataBinding();

    }



    function initDataBinding() {

      ngModelController.$render = function() {

        if (scope.model === ngModelController.$viewValue) return;

        scope.model = ngModelController.$viewValue;

      }



      scope.$watch('model', function(newValue) {

        if (newValue === undefined) {

          element.addClass('empty');

          return;

        }

        element.removeClass('empty');

        ngModelController.$setViewValue(newValue);

      });

    }

  }



  function getTemplate(element, attrs) {

    var attributes = [

      'ng-model="model"',

      'ng-required="true"'

    ];



    if (angular.isDefined(attrs.placeholder)) {

      attributes.push('placeholder="{{placeholder}}"');

    }



    var ngOptions = '';



    if (angular.isDefined(attrs.valueProperty)) {

      ngOptions += 'item.' + attrs.valueProperty + ' as ';

    }



    ngOptions += 'item.' + attrs.displayProperty + ' for item in source';

    ngOptions += '"';

    attributes.push('ng-options="' + ngOptions + '"');



    var html = '<select ' + attributes.join(' ') + '></select>';



    return html;

  }



});

so-select {

  position: relative;

}



so-select select {

  font-family: 'Helvetica';

  display: inline-block;

  height: 24px;

  width: 200px;

  padding: 0 1px;

  font-size: 12px;

  color: #222;

  border: 1px solid #c7c7c7;

  border-radius: 4px;

}



so-select.empty:before {

  font-family: 'Helvetica';

  font-size: 12px;

  content: attr(placeholder);

  position: absolute;

  pointer-events: none;

  left: 6px;

  top: 3px;

  z-index: 0;

  color: #888;

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="soDemo" ng-controller="soDemoController">

  <so-select value-property="id" display-property="name" source="vm.names" ng-model="vm.nameId" placeholder="(select name)"></so-select>

</div>

edited Jul 17 '17 at 19:40

answered Jun 8 '17 at 22:12

flyer

65239

add a comment |

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 b/c 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)

var app = angular.module("soDemo", );

app.controller("soDemoController", function($scope) {

  var vm = {};

  vm.names = [{

      id: 1,

      name: 'Jon'

    },

    {

      id: 2,

      name: 'Joe'

    }, {

      id: 3,

      name: 'Bob'

    }, {

      id: 4,

      name: 'Jane'

    }

  ];

  vm.nameId;

  $scope.vm = vm;

});



app.directive('soSelect', function soSelect() {

  var directive = {

    restrict: 'E',

    require: 'ngModel',

    scope: {

      'valueProperty': '@',

      'displayProperty': '@',

      'modelProperty': '=',

      'source': '=',

    },

    link: link,

    template: getTemplate

  };

  return directive;



  /////////////////////////////////

  function link(scope, element, attrs, ngModelController) {

    init();

    return;



    ///////////// IMPLEMENTATION



    function init() {

      initDataBinding();

    }



    function initDataBinding() {

      ngModelController.$render = function() {

        if (scope.model === ngModelController.$viewValue) return;

        scope.model = ngModelController.$viewValue;

      }



      scope.$watch('model', function(newValue) {

        if (newValue === undefined) {

          element.addClass('empty');

          return;

        }

        element.removeClass('empty');

        ngModelController.$setViewValue(newValue);

      });

    }

  }



  function getTemplate(element, attrs) {

    var attributes = [

      'ng-model="model"',

      'ng-required="true"'

    ];



    if (angular.isDefined(attrs.placeholder)) {

      attributes.push('placeholder="{{placeholder}}"');

    }



    var ngOptions = '';



    if (angular.isDefined(attrs.valueProperty)) {

      ngOptions += 'item.' + attrs.valueProperty + ' as ';

    }



    ngOptions += 'item.' + attrs.displayProperty + ' for item in source';

    ngOptions += '"';

    attributes.push('ng-options="' + ngOptions + '"');



    var html = '<select ' + attributes.join(' ') + '></select>';



    return html;

  }



});

so-select {

  position: relative;

}



so-select select {

  font-family: 'Helvetica';

  display: inline-block;

  height: 24px;

  width: 200px;

  padding: 0 1px;

  font-size: 12px;

  color: #222;

  border: 1px solid #c7c7c7;

  border-radius: 4px;

}



so-select.empty:before {

  font-family: 'Helvetica';

  font-size: 12px;

  content: attr(placeholder);

  position: absolute;

  pointer-events: none;

  left: 6px;

  top: 3px;

  z-index: 0;

  color: #888;

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="soDemo" ng-controller="soDemoController">

  <so-select value-property="id" display-property="name" source="vm.names" ng-model="vm.nameId" placeholder="(select name)"></so-select>

</div>

edited Jul 17 '17 at 19:40

answered Jun 8 '17 at 22:12

flyer

65239

add a comment |

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 b/c 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)

var app = angular.module("soDemo", );

app.controller("soDemoController", function($scope) {

  var vm = {};

  vm.names = [{

      id: 1,

      name: 'Jon'

    },

    {

      id: 2,

      name: 'Joe'

    }, {

      id: 3,

      name: 'Bob'

    }, {

      id: 4,

      name: 'Jane'

    }

  ];

  vm.nameId;

  $scope.vm = vm;

});



app.directive('soSelect', function soSelect() {

  var directive = {

    restrict: 'E',

    require: 'ngModel',

    scope: {

      'valueProperty': '@',

      'displayProperty': '@',

      'modelProperty': '=',

      'source': '=',

    },

    link: link,

    template: getTemplate

  };

  return directive;



  /////////////////////////////////

  function link(scope, element, attrs, ngModelController) {

    init();

    return;



    ///////////// IMPLEMENTATION



    function init() {

      initDataBinding();

    }



    function initDataBinding() {

      ngModelController.$render = function() {

        if (scope.model === ngModelController.$viewValue) return;

        scope.model = ngModelController.$viewValue;

      }



      scope.$watch('model', function(newValue) {

        if (newValue === undefined) {

          element.addClass('empty');

          return;

        }

        element.removeClass('empty');

        ngModelController.$setViewValue(newValue);

      });

    }

  }



  function getTemplate(element, attrs) {

    var attributes = [

      'ng-model="model"',

      'ng-required="true"'

    ];



    if (angular.isDefined(attrs.placeholder)) {

      attributes.push('placeholder="{{placeholder}}"');

    }



    var ngOptions = '';



    if (angular.isDefined(attrs.valueProperty)) {

      ngOptions += 'item.' + attrs.valueProperty + ' as ';

    }



    ngOptions += 'item.' + attrs.displayProperty + ' for item in source';

    ngOptions += '"';

    attributes.push('ng-options="' + ngOptions + '"');



    var html = '<select ' + attributes.join(' ') + '></select>';



    return html;

  }



});

so-select {

  position: relative;

}



so-select select {

  font-family: 'Helvetica';

  display: inline-block;

  height: 24px;

  width: 200px;

  padding: 0 1px;

  font-size: 12px;

  color: #222;

  border: 1px solid #c7c7c7;

  border-radius: 4px;

}



so-select.empty:before {

  font-family: 'Helvetica';

  font-size: 12px;

  content: attr(placeholder);

  position: absolute;

  pointer-events: none;

  left: 6px;

  top: 3px;

  z-index: 0;

  color: #888;

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="soDemo" ng-controller="soDemoController">

  <so-select value-property="id" display-property="name" source="vm.names" ng-model="vm.nameId" placeholder="(select name)"></so-select>

</div>

edited Jul 17 '17 at 19:40

answered Jun 8 '17 at 22:12

flyer

65239

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 b/c 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)

var app = angular.module("soDemo", );

app.controller("soDemoController", function($scope) {

  var vm = {};

  vm.names = [{

      id: 1,

      name: 'Jon'

    },

    {

      id: 2,

      name: 'Joe'

    }, {

      id: 3,

      name: 'Bob'

    }, {

      id: 4,

      name: 'Jane'

    }

  ];

  vm.nameId;

  $scope.vm = vm;

});



app.directive('soSelect', function soSelect() {

  var directive = {

    restrict: 'E',

    require: 'ngModel',

    scope: {

      'valueProperty': '@',

      'displayProperty': '@',

      'modelProperty': '=',

      'source': '=',

    },

    link: link,

    template: getTemplate

  };

  return directive;



  /////////////////////////////////

  function link(scope, element, attrs, ngModelController) {

    init();

    return;



    ///////////// IMPLEMENTATION



    function init() {

      initDataBinding();

    }



    function initDataBinding() {

      ngModelController.$render = function() {

        if (scope.model === ngModelController.$viewValue) return;

        scope.model = ngModelController.$viewValue;

      }



      scope.$watch('model', function(newValue) {

        if (newValue === undefined) {

          element.addClass('empty');

          return;

        }

        element.removeClass('empty');

        ngModelController.$setViewValue(newValue);

      });

    }

  }



  function getTemplate(element, attrs) {

    var attributes = [

      'ng-model="model"',

      'ng-required="true"'

    ];



    if (angular.isDefined(attrs.placeholder)) {

      attributes.push('placeholder="{{placeholder}}"');

    }



    var ngOptions = '';



    if (angular.isDefined(attrs.valueProperty)) {

      ngOptions += 'item.' + attrs.valueProperty + ' as ';

    }



    ngOptions += 'item.' + attrs.displayProperty + ' for item in source';

    ngOptions += '"';

    attributes.push('ng-options="' + ngOptions + '"');



    var html = '<select ' + attributes.join(' ') + '></select>';



    return html;

  }



});

so-select {

  position: relative;

}



so-select select {

  font-family: 'Helvetica';

  display: inline-block;

  height: 24px;

  width: 200px;

  padding: 0 1px;

  font-size: 12px;

  color: #222;

  border: 1px solid #c7c7c7;

  border-radius: 4px;

}



so-select.empty:before {

  font-family: 'Helvetica';

  font-size: 12px;

  content: attr(placeholder);

  position: absolute;

  pointer-events: none;

  left: 6px;

  top: 3px;

  z-index: 0;

  color: #888;

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="soDemo" ng-controller="soDemoController">

  <so-select value-property="id" display-property="name" source="vm.names" ng-model="vm.nameId" placeholder="(select name)"></so-select>

</div>

var app = angular.module("soDemo", );

app.controller("soDemoController", function($scope) {

  var vm = {};

  vm.names = [{

      id: 1,

      name: 'Jon'

    },

    {

      id: 2,

      name: 'Joe'

    }, {

      id: 3,

      name: 'Bob'

    }, {

      id: 4,

      name: 'Jane'

    }

  ];

  vm.nameId;

  $scope.vm = vm;

});



app.directive('soSelect', function soSelect() {

  var directive = {

    restrict: 'E',

    require: 'ngModel',

    scope: {

      'valueProperty': '@',

      'displayProperty': '@',

      'modelProperty': '=',

      'source': '=',

    },

    link: link,

    template: getTemplate

  };

  return directive;



  /////////////////////////////////

  function link(scope, element, attrs, ngModelController) {

    init();

    return;



    ///////////// IMPLEMENTATION



    function init() {

      initDataBinding();

    }



    function initDataBinding() {

      ngModelController.$render = function() {

        if (scope.model === ngModelController.$viewValue) return;

        scope.model = ngModelController.$viewValue;

      }



      scope.$watch('model', function(newValue) {

        if (newValue === undefined) {

          element.addClass('empty');

          return;

        }

        element.removeClass('empty');

        ngModelController.$setViewValue(newValue);

      });

    }

  }



  function getTemplate(element, attrs) {

    var attributes = [

      'ng-model="model"',

      'ng-required="true"'

    ];



    if (angular.isDefined(attrs.placeholder)) {

      attributes.push('placeholder="{{placeholder}}"');

    }



    var ngOptions = '';



    if (angular.isDefined(attrs.valueProperty)) {

      ngOptions += 'item.' + attrs.valueProperty + ' as ';

    }



    ngOptions += 'item.' + attrs.displayProperty + ' for item in source';

    ngOptions += '"';

    attributes.push('ng-options="' + ngOptions + '"');



    var html = '<select ' + attributes.join(' ') + '></select>';



    return html;

  }



});

so-select {

  position: relative;

}



so-select select {

  font-family: 'Helvetica';

  display: inline-block;

  height: 24px;

  width: 200px;

  padding: 0 1px;

  font-size: 12px;

  color: #222;

  border: 1px solid #c7c7c7;

  border-radius: 4px;

}



so-select.empty:before {

  font-family: 'Helvetica';

  font-size: 12px;

  content: attr(placeholder);

  position: absolute;

  pointer-events: none;

  left: 6px;

  top: 3px;

  z-index: 0;

  color: #888;

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="soDemo" ng-controller="soDemoController">

  <so-select value-property="id" display-property="name" source="vm.names" ng-model="vm.nameId" placeholder="(select name)"></so-select>

</div>

var app = angular.module("soDemo", );

app.controller("soDemoController", function($scope) {

  var vm = {};

  vm.names = [{

      id: 1,

      name: 'Jon'

    },

    {

      id: 2,

      name: 'Joe'

    }, {

      id: 3,

      name: 'Bob'

    }, {

      id: 4,

      name: 'Jane'

    }

  ];

  vm.nameId;

  $scope.vm = vm;

});



app.directive('soSelect', function soSelect() {

  var directive = {

    restrict: 'E',

    require: 'ngModel',

    scope: {

      'valueProperty': '@',

      'displayProperty': '@',

      'modelProperty': '=',

      'source': '=',

    },

    link: link,

    template: getTemplate

  };

  return directive;



  /////////////////////////////////

  function link(scope, element, attrs, ngModelController) {

    init();

    return;



    ///////////// IMPLEMENTATION



    function init() {

      initDataBinding();

    }



    function initDataBinding() {

      ngModelController.$render = function() {

        if (scope.model === ngModelController.$viewValue) return;

        scope.model = ngModelController.$viewValue;

      }



      scope.$watch('model', function(newValue) {

        if (newValue === undefined) {

          element.addClass('empty');

          return;

        }

        element.removeClass('empty');

        ngModelController.$setViewValue(newValue);

      });

    }

  }



  function getTemplate(element, attrs) {

    var attributes = [

      'ng-model="model"',

      'ng-required="true"'

    ];



    if (angular.isDefined(attrs.placeholder)) {

      attributes.push('placeholder="{{placeholder}}"');

    }



    var ngOptions = '';



    if (angular.isDefined(attrs.valueProperty)) {

      ngOptions += 'item.' + attrs.valueProperty + ' as ';

    }



    ngOptions += 'item.' + attrs.displayProperty + ' for item in source';

    ngOptions += '"';

    attributes.push('ng-options="' + ngOptions + '"');



    var html = '<select ' + attributes.join(' ') + '></select>';



    return html;

  }



});

so-select {

  position: relative;

}



so-select select {

  font-family: 'Helvetica';

  display: inline-block;

  height: 24px;

  width: 200px;

  padding: 0 1px;

  font-size: 12px;

  color: #222;

  border: 1px solid #c7c7c7;

  border-radius: 4px;

}



so-select.empty:before {

  font-family: 'Helvetica';

  font-size: 12px;

  content: attr(placeholder);

  position: absolute;

  pointer-events: none;

  left: 6px;

  top: 3px;

  z-index: 0;

  color: #888;

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="soDemo" ng-controller="soDemoController">

  <so-select value-property="id" display-property="name" source="vm.names" ng-model="vm.nameId" placeholder="(select name)"></so-select>

</div>

edited Jul 17 '17 at 19:40

answered Jun 8 '17 at 22:12

flyer

65239

edited Jul 17 '17 at 19:40

answered Jun 8 '17 at 22:12

flyer

65239

answered Jun 8 '17 at 22:12

flyer

65239

answered Jun 8 '17 at 22:12

flyer

65239

add a comment |

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.

<form action="" method="POST">

    <select name="in-op" required="">

        <option disabled="" selected="">Select Option</option>

        <option>Option 1</option>

        <option>Option 2</option>

        <option>Option 3</option>

    </select>

    <input type="submit" value="Submit">

</form>

answered Dec 15 '16 at 15:03

Thusitha Wickramasinghe

5431722

This causes the whole select element to be grayed out until an option is chosen, thus causing a potentially undesired behaviour.

– wickedchild
Sep 11 '17 at 12:11

add a comment |

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.

<form action="" method="POST">

    <select name="in-op" required="">

        <option disabled="" selected="">Select Option</option>

        <option>Option 1</option>

        <option>Option 2</option>

        <option>Option 3</option>

    </select>

    <input type="submit" value="Submit">

</form>

answered Dec 15 '16 at 15:03

Thusitha Wickramasinghe

5431722

This causes the whole select element to be grayed out until an option is chosen, thus causing a potentially undesired behaviour.

– wickedchild
Sep 11 '17 at 12:11

add a comment |

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.

<form action="" method="POST">

    <select name="in-op" required="">

        <option disabled="" selected="">Select Option</option>

        <option>Option 1</option>

        <option>Option 2</option>

        <option>Option 3</option>

    </select>

    <input type="submit" value="Submit">

</form>

answered Dec 15 '16 at 15:03

Thusitha Wickramasinghe

5431722

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.

<form action="" method="POST">

    <select name="in-op" required="">

        <option disabled="" selected="">Select Option</option>

        <option>Option 1</option>

        <option>Option 2</option>

        <option>Option 3</option>

    </select>

    <input type="submit" value="Submit">

</form>

answered Dec 15 '16 at 15:03

Thusitha Wickramasinghe

5431722

answered Dec 15 '16 at 15:03

Thusitha Wickramasinghe

5431722

answered Dec 15 '16 at 15:03

Thusitha Wickramasinghe

5431722

answered Dec 15 '16 at 15:03

Thusitha Wickramasinghe

5431722

This causes the whole select element to be grayed out until an option is chosen, thus causing a potentially undesired behaviour.

– wickedchild
Sep 11 '17 at 12:11

add a comment |

This causes the whole select element to be grayed out until an option is chosen, thus causing a potentially undesired behaviour.

– wickedchild
Sep 11 '17 at 12:11

This causes the whole select element to be grayed out until an option is chosen, thus causing a potentially undesired behaviour.

– wickedchild
Sep 11 '17 at 12:11

add a comment |

I wanted the SELECT to be grey until selected so for this piece of HTML:

<select>

  <option value="" disabled selected>Select your option</option>

  <option value="hurr">Durr</option>

</select>

I've added these CSS definitions:

select { color: grey; }

select:valid { color: black; }

It works as expected in Chrome / Safari, maybe also in other browsers but I haven't checked.

answered Jun 7 '17 at 7:56

fbparis

153312

add a comment |

I wanted the SELECT to be grey until selected so for this piece of HTML:

<select>

  <option value="" disabled selected>Select your option</option>

  <option value="hurr">Durr</option>

</select>

I've added these CSS definitions:

select { color: grey; }

select:valid { color: black; }

It works as expected in Chrome / Safari, maybe also in other browsers but I haven't checked.

answered Jun 7 '17 at 7:56

fbparis

153312

add a comment |

I wanted the SELECT to be grey until selected so for this piece of HTML:

<select>

  <option value="" disabled selected>Select your option</option>

  <option value="hurr">Durr</option>

</select>

I've added these CSS definitions:

select { color: grey; }

select:valid { color: black; }

It works as expected in Chrome / Safari, maybe also in other browsers but I haven't checked.

answered Jun 7 '17 at 7:56

fbparis

153312

I wanted the SELECT to be grey until selected so for this piece of HTML:

<select>

  <option value="" disabled selected>Select your option</option>

  <option value="hurr">Durr</option>

</select>

I've added these CSS definitions:

select { color: grey; }

select:valid { color: black; }

It works as expected in Chrome / Safari, maybe also in other browsers but I haven't checked.

answered Jun 7 '17 at 7:56

fbparis

153312

answered Jun 7 '17 at 7:56

fbparis

153312

answered Jun 7 '17 at 7:56

fbparis

153312

answered Jun 7 '17 at 7:56

fbparis

153312

add a comment |

Here is a working example how to achieve this with pure javascript that handles the options color after the first click:

<!DOCTYPE html>

<html>

  <head>

    <style>

    #myselect{

    color:gray;

    }

    </style>

  </head>

  <body>

    <select id="myselect">

      <option disabled selected>Choose Item

      </option>

      <option>Item 1

      </option>

      <option>Item 2

      </option>

      <option>Item 3

      </option>

    </select>

    <script>

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

      }

    </script>

  </body>

</html>

edited Feb 3 at 6:31

answered Jan 24 at 15:11

jonathana

3,13421226

add a comment |

Here is a working example how to achieve this with pure javascript that handles the options color after the first click:

<!DOCTYPE html>

<html>

  <head>

    <style>

    #myselect{

    color:gray;

    }

    </style>

  </head>

  <body>

    <select id="myselect">

      <option disabled selected>Choose Item

      </option>

      <option>Item 1

      </option>

      <option>Item 2

      </option>

      <option>Item 3

      </option>

    </select>

    <script>

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

      }

    </script>

  </body>

</html>

edited Feb 3 at 6:31

answered Jan 24 at 15:11

jonathana

3,13421226

add a comment |

Here is a working example how to achieve this with pure javascript that handles the options color after the first click:

<!DOCTYPE html>

<html>

  <head>

    <style>

    #myselect{

    color:gray;

    }

    </style>

  </head>

  <body>

    <select id="myselect">

      <option disabled selected>Choose Item

      </option>

      <option>Item 1

      </option>

      <option>Item 2

      </option>

      <option>Item 3

      </option>

    </select>

    <script>

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

      }

    </script>

  </body>

</html>

edited Feb 3 at 6:31

answered Jan 24 at 15:11

jonathana

3,13421226

Here is a working example how to achieve this with pure javascript that handles the options color after the first click:

<!DOCTYPE html>

<html>

  <head>

    <style>

    #myselect{

    color:gray;

    }

    </style>

  </head>

  <body>

    <select id="myselect">

      <option disabled selected>Choose Item

      </option>

      <option>Item 1

      </option>

      <option>Item 2

      </option>

      <option>Item 3

      </option>

    </select>

    <script>

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

      }

    </script>

  </body>

</html>

edited Feb 3 at 6:31

answered Jan 24 at 15:11

jonathana

3,13421226

edited Feb 3 at 6:31

answered Jan 24 at 15:11

jonathana

3,13421226

answered Jan 24 at 15:11

jonathana

3,13421226

answered Jan 24 at 15:11

jonathana

3,13421226

add a comment |

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

    }

});

answered Feb 15 '18 at 7:41

Jordan Lipana

345

add a comment |

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

    }

});

answered Feb 15 '18 at 7:41

Jordan Lipana

345

add a comment |

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

    }

});

answered Feb 15 '18 at 7:41

Jordan Lipana

345

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

    }

});

answered Feb 15 '18 at 7:41

Jordan Lipana

345

answered Feb 15 '18 at 7:41

Jordan Lipana

345

answered Feb 15 '18 at 7:41

Jordan Lipana

345

answered Feb 15 '18 at 7:41

Jordan Lipana

345

add a comment |

I'm not content with HTML/CSS only solutions, so I've decided to create a custom select using JS.

This is something I've written in the past 30 mins, thus it can be further improved.

Input:

<ul class="select" data-placeholder="Role" data-name="role">

  <li data-value="admin">Administrator</li>

  <li data-value="mod">Moderator</li>

  <li data-value="user">User</li>

</ul>

Output:

<div class="ul-select-container">

    <input type="hidden" name="role" class="hidden">

    <div class="selected placeholder">

        <span class="text">Role</span>

        <span class="icon">▼</span>

    </div>

    <ul class="select" data-placeholder="Role" data-name="role">

        <li class="placeholder">Role</li>

        <li data-value="admin">Administrator</li>

        <li data-value="mod">Moderator</li>

        <li data-value="user">User</li>

    </ul>

</div>

// helper function to create elements faster/easier

// https://github.com/akinuri/js-lib/blob/master/element.js

var elem = function(tagName, attributes, children, isHTML) {

  let parent;

  if (typeof tagName == "string") {

    parent = document.createElement(tagName);

  } else if (tagName instanceof HTMLElement) {

    parent = tagName;

  }

  if (attributes) {

    for (let attribute in attributes) {

      parent.setAttribute(attribute, attributes[attribute]);

    }

  }

  var isHTML = isHTML || null;

  if (children || children == 0) {

    elem.append(parent, children, isHTML);

  }

  return parent;

};

elem.append = function(parent, children, isHTML) {

  if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) {

    if (children instanceof Text || typeof children == "string" || typeof children == "number") {

      parent.value = children;

    } else if (children instanceof Array) {

      children.forEach(function(child) {

        elem.append(parent, child);

      });

    } else if (typeof children == "function") {

      elem.append(parent, children());

    }

  } else {

    if (children instanceof HTMLElement || children instanceof Text) {

      parent.appendChild(children);

    } else if (typeof children == "string" || typeof children == "number") {

      if (isHTML) {

        parent.innerHTML += children;

      } else {

        parent.appendChild(document.createTextNode(children));

      }

    } else if (children instanceof Array) {

      children.forEach(function(child) {

        elem.append(parent, child);

      });

    } else if (typeof children == "function") {

      elem.append(parent, children());

    }

  }

};





// initialize all selects on the page

$("ul.select").each(function() {

  var parent    = this.parentElement;

  var refElem   = this.nextElementSibling;

  var container = elem("div", {"class": "ul-select-container"});

  var hidden    = elem("input", {"type": "hidden", "name": this.dataset.name, "class": "hidden"});

  var selected  = elem("div", {"class": "selected placeholder"}, [

    elem("span", {"class": "text"}, this.dataset.placeholder),

    elem("span", {"class": "icon"}, "▼", true),

  ]);

  var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder);

  this.insertBefore(placeholder, this.children[0]);

  container.appendChild(hidden);

  container.appendChild(selected);

  container.appendChild(this);

  parent.insertBefore(container, refElem);

});



// update necessary elements with the selected option

$(".ul-select-container ul li").on("click", function() {

  var text     = this.innerText;

  var value    = this.dataset.value || "";

  var selected = this.parentElement.previousElementSibling;

  var hidden   = selected.previousElementSibling;

  hidden.value = selected.dataset.value = value;

  selected.children[0].innerText = text;

  if (this.classList.contains("placeholder")) {

    selected.classList.add("placeholder");

  } else {

    selected.classList.remove("placeholder");

  }

  selected.parentElement.classList.remove("visible");

});



// open select dropdown

$(".ul-select-container .selected").on("click", function() {

  if (this.parentElement.classList.contains("visible")) {

    this.parentElement.classList.remove("visible");

  } else {

    this.parentElement.classList.add("visible");

  }

});



// close select when focus is lost

$(document).on("click", function(e) {

  var container = $(e.target).closest(".ul-select-container");

  if (container.length == 0) {

    $(".ul-select-container.visible").removeClass("visible");

  }

});

.ul-select-container {

  width: 200px;

  display: table;

  position: relative;

  margin: 1em 0;

}

.ul-select-container.visible ul {

  display: block;

  padding: 0;

  list-style: none;

  margin: 0;

}

.ul-select-container ul {

  background-color: white;

  border: 1px solid hsla(0, 0%, 60%);

  border-top: none;

  -webkit-user-select: none;

  display: none;

  position: absolute;

  width: 100%;

  z-index: 999;

}

.ul-select-container ul li {

  padding: 2px 5px;

}

.ul-select-container ul li.placeholder {

  opacity: 0.5;

}

.ul-select-container ul li:hover {

  background-color: dodgerblue;

  color: white;

}

.ul-select-container ul li.placeholder:hover {

  background-color: rgba(0, 0, 0, .1);

  color: initial;

}

.ul-select-container .selected {

  background-color: white;

  padding: 3px 10px 4px;

  padding: 2px 5px;

  border: 1px solid hsla(0, 0%, 60%);

  -webkit-user-select: none;

}

.ul-select-container .selected {

  display: flex;

  justify-content: space-between;

}

.ul-select-container .selected.placeholder .text {

  color: rgba(0, 0, 0, .5);

}

.ul-select-container .selected .icon {

  font-size: .7em;

  display: flex;

  align-items: center;

  opacity: 0.8;

}

.ul-select-container:hover .selected {

  border: 1px solid hsla(0, 0%, 30%);

}

.ul-select-container:hover .selected .icon {

  opacity: 1;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<ul class="select" data-placeholder="Role" data-name="role">

  <li data-value="admin">Administrator</li>

  <li data-value="mod">Moderator</li>

  <li data-value="user">User</li>

</ul>



<ul class="select" data-placeholder="Sex" data-name="sex">

  <li data-value="male">Male</li>

  <li data-value="female">Female</li>

</ul>

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:

<div class="li-select-container">

    <input type="text" readonly="" placeholder="Role" title="Role">

    <span class="arrow">▼</span>

    <ul class="select">

        <li class="placeholder">Role</li>

        <li data-value="admin">Administrator</li>

        <li data-value="mod">Moderator</li>

        <li data-value="user">User</li>

    </ul>

</div>

Initialization:

new Liselect(document.getElementsByTagName("ul")[0]);

For further examination: JSFiddle, ~~GitHub~~ (renamed).

Update: Rewritten this again. Instead of using a list, we can just use a select. This way it'll work even without JS (in case it's disabled).

Input:

<select name="role" data-placeholder="Role" required title="Role">

    <option value="admin">Administrator</option>

    <option value="mod">Moderator</option>

    <option>User</option>

</select>

new Advancelect(document.getElementsByTagName("select")[0]);

Output:

<div class="advanced-select">

    <input type="text" readonly="" placeholder="Role" title="Role" required="" name="role">

    <span class="arrow">▼</span>

    <ul>

        <li class="placeholder">Role</li>

        <li data-value="admin">Administrator</li>

        <li data-value="mod">Moderator</li>

        <li>User</li>

    </ul>

</div>

JSFiddle, GitHub.

edited Jun 28 '18 at 14:03

answered Jun 13 '18 at 14:58

akinuri

3,64152554

add a comment |

I'm not content with HTML/CSS only solutions, so I've decided to create a custom select using JS.

This is something I've written in the past 30 mins, thus it can be further improved.

Input:

<ul class="select" data-placeholder="Role" data-name="role">

  <li data-value="admin">Administrator</li>

  <li data-value="mod">Moderator</li>

  <li data-value="user">User</li>

</ul>

Output:

<div class="ul-select-container">

    <input type="hidden" name="role" class="hidden">

    <div class="selected placeholder">

        <span class="text">Role</span>

        <span class="icon">▼</span>

    </div>

    <ul class="select" data-placeholder="Role" data-name="role">

        <li class="placeholder">Role</li>

        <li data-value="admin">Administrator</li>

        <li data-value="mod">Moderator</li>

        <li data-value="user">User</li>

    </ul>

</div>

// helper function to create elements faster/easier

// https://github.com/akinuri/js-lib/blob/master/element.js

var elem = function(tagName, attributes, children, isHTML) {

  let parent;

  if (typeof tagName == "string") {

    parent = document.createElement(tagName);

  } else if (tagName instanceof HTMLElement) {

    parent = tagName;

  }

  if (attributes) {

    for (let attribute in attributes) {

      parent.setAttribute(attribute, attributes[attribute]);

    }

  }

  var isHTML = isHTML || null;

  if (children || children == 0) {

    elem.append(parent, children, isHTML);

  }

  return parent;

};

elem.append = function(parent, children, isHTML) {

  if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) {

    if (children instanceof Text || typeof children == "string" || typeof children == "number") {

      parent.value = children;

    } else if (children instanceof Array) {

      children.forEach(function(child) {

        elem.append(parent, child);

      });

    } else if (typeof children == "function") {

      elem.append(parent, children());

    }

  } else {

    if (children instanceof HTMLElement || children instanceof Text) {

      parent.appendChild(children);

    } else if (typeof children == "string" || typeof children == "number") {

      if (isHTML) {

        parent.innerHTML += children;

      } else {

        parent.appendChild(document.createTextNode(children));

      }

    } else if (children instanceof Array) {

      children.forEach(function(child) {

        elem.append(parent, child);

      });

    } else if (typeof children == "function") {

      elem.append(parent, children());

    }

  }

};





// initialize all selects on the page

$("ul.select").each(function() {

  var parent    = this.parentElement;

  var refElem   = this.nextElementSibling;

  var container = elem("div", {"class": "ul-select-container"});

  var hidden    = elem("input", {"type": "hidden", "name": this.dataset.name, "class": "hidden"});

  var selected  = elem("div", {"class": "selected placeholder"}, [

    elem("span", {"class": "text"}, this.dataset.placeholder),

    elem("span", {"class": "icon"}, "▼", true),

  ]);

  var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder);

  this.insertBefore(placeholder, this.children[0]);

  container.appendChild(hidden);

  container.appendChild(selected);

  container.appendChild(this);

  parent.insertBefore(container, refElem);

});



// update necessary elements with the selected option

$(".ul-select-container ul li").on("click", function() {

  var text     = this.innerText;

  var value    = this.dataset.value || "";

  var selected = this.parentElement.previousElementSibling;

  var hidden   = selected.previousElementSibling;

  hidden.value = selected.dataset.value = value;

  selected.children[0].innerText = text;

  if (this.classList.contains("placeholder")) {

    selected.classList.add("placeholder");

  } else {

    selected.classList.remove("placeholder");

  }

  selected.parentElement.classList.remove("visible");

});



// open select dropdown

$(".ul-select-container .selected").on("click", function() {

  if (this.parentElement.classList.contains("visible")) {

    this.parentElement.classList.remove("visible");

  } else {

    this.parentElement.classList.add("visible");

  }

});



// close select when focus is lost

$(document).on("click", function(e) {

  var container = $(e.target).closest(".ul-select-container");

  if (container.length == 0) {

    $(".ul-select-container.visible").removeClass("visible");

  }

});

.ul-select-container {

  width: 200px;

  display: table;

  position: relative;

  margin: 1em 0;

}

.ul-select-container.visible ul {

  display: block;

  padding: 0;

  list-style: none;

  margin: 0;

}

.ul-select-container ul {

  background-color: white;

  border: 1px solid hsla(0, 0%, 60%);

  border-top: none;

  -webkit-user-select: none;

  display: none;

  position: absolute;

  width: 100%;

  z-index: 999;

}

.ul-select-container ul li {

  padding: 2px 5px;

}

.ul-select-container ul li.placeholder {

  opacity: 0.5;

}

.ul-select-container ul li:hover {

  background-color: dodgerblue;

  color: white;

}

.ul-select-container ul li.placeholder:hover {

  background-color: rgba(0, 0, 0, .1);

  color: initial;

}

.ul-select-container .selected {

  background-color: white;

  padding: 3px 10px 4px;

  padding: 2px 5px;

  border: 1px solid hsla(0, 0%, 60%);

  -webkit-user-select: none;

}

.ul-select-container .selected {

  display: flex;

  justify-content: space-between;

}

.ul-select-container .selected.placeholder .text {

  color: rgba(0, 0, 0, .5);

}

.ul-select-container .selected .icon {

  font-size: .7em;

  display: flex;

  align-items: center;

  opacity: 0.8;

}

.ul-select-container:hover .selected {

  border: 1px solid hsla(0, 0%, 30%);

}

.ul-select-container:hover .selected .icon {

  opacity: 1;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<ul class="select" data-placeholder="Role" data-name="role">

  <li data-value="admin">Administrator</li>

  <li data-value="mod">Moderator</li>

  <li data-value="user">User</li>

</ul>



<ul class="select" data-placeholder="Sex" data-name="sex">

  <li data-value="male">Male</li>

  <li data-value="female">Female</li>

</ul>

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:

<div class="li-select-container">

    <input type="text" readonly="" placeholder="Role" title="Role">

    <span class="arrow">▼</span>

    <ul class="select">

        <li class="placeholder">Role</li>

        <li data-value="admin">Administrator</li>

        <li data-value="mod">Moderator</li>

        <li data-value="user">User</li>

    </ul>

</div>

Initialization:

new Liselect(document.getElementsByTagName("ul")[0]);

For further examination: JSFiddle, ~~GitHub~~ (renamed).

Update: Rewritten this again. Instead of using a list, we can just use a select. This way it'll work even without JS (in case it's disabled).

Input:

<select name="role" data-placeholder="Role" required title="Role">

    <option value="admin">Administrator</option>

    <option value="mod">Moderator</option>

    <option>User</option>

</select>

new Advancelect(document.getElementsByTagName("select")[0]);

Output:

<div class="advanced-select">

    <input type="text" readonly="" placeholder="Role" title="Role" required="" name="role">

    <span class="arrow">▼</span>

    <ul>

        <li class="placeholder">Role</li>

        <li data-value="admin">Administrator</li>

        <li data-value="mod">Moderator</li>

        <li>User</li>

    </ul>

</div>

JSFiddle, GitHub.

edited Jun 28 '18 at 14:03

answered Jun 13 '18 at 14:58

akinuri

3,64152554

add a comment |

I'm not content with HTML/CSS only solutions, so I've decided to create a custom select using JS.

This is something I've written in the past 30 mins, thus it can be further improved.

Input:

<ul class="select" data-placeholder="Role" data-name="role">

  <li data-value="admin">Administrator</li>

  <li data-value="mod">Moderator</li>

  <li data-value="user">User</li>

</ul>

Output:

<div class="ul-select-container">

    <input type="hidden" name="role" class="hidden">

    <div class="selected placeholder">

        <span class="text">Role</span>

        <span class="icon">▼</span>

    </div>

    <ul class="select" data-placeholder="Role" data-name="role">

        <li class="placeholder">Role</li>

        <li data-value="admin">Administrator</li>

        <li data-value="mod">Moderator</li>

        <li data-value="user">User</li>

    </ul>

</div>

// helper function to create elements faster/easier

// https://github.com/akinuri/js-lib/blob/master/element.js

var elem = function(tagName, attributes, children, isHTML) {

  let parent;

  if (typeof tagName == "string") {

    parent = document.createElement(tagName);

  } else if (tagName instanceof HTMLElement) {

    parent = tagName;

  }

  if (attributes) {

    for (let attribute in attributes) {

      parent.setAttribute(attribute, attributes[attribute]);

    }

  }

  var isHTML = isHTML || null;

  if (children || children == 0) {

    elem.append(parent, children, isHTML);

  }

  return parent;

};

elem.append = function(parent, children, isHTML) {

  if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) {

    if (children instanceof Text || typeof children == "string" || typeof children == "number") {

      parent.value = children;

    } else if (children instanceof Array) {

      children.forEach(function(child) {

        elem.append(parent, child);

      });

    } else if (typeof children == "function") {

      elem.append(parent, children());

    }

  } else {

    if (children instanceof HTMLElement || children instanceof Text) {

      parent.appendChild(children);

    } else if (typeof children == "string" || typeof children == "number") {

      if (isHTML) {

        parent.innerHTML += children;

      } else {

        parent.appendChild(document.createTextNode(children));

      }

    } else if (children instanceof Array) {

      children.forEach(function(child) {

        elem.append(parent, child);

      });

    } else if (typeof children == "function") {

      elem.append(parent, children());

    }

  }

};





// initialize all selects on the page

$("ul.select").each(function() {

  var parent    = this.parentElement;

  var refElem   = this.nextElementSibling;

  var container = elem("div", {"class": "ul-select-container"});

  var hidden    = elem("input", {"type": "hidden", "name": this.dataset.name, "class": "hidden"});

  var selected  = elem("div", {"class": "selected placeholder"}, [

    elem("span", {"class": "text"}, this.dataset.placeholder),

    elem("span", {"class": "icon"}, "▼", true),

  ]);

  var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder);

  this.insertBefore(placeholder, this.children[0]);

  container.appendChild(hidden);

  container.appendChild(selected);

  container.appendChild(this);

  parent.insertBefore(container, refElem);

});



// update necessary elements with the selected option

$(".ul-select-container ul li").on("click", function() {

  var text     = this.innerText;

  var value    = this.dataset.value || "";

  var selected = this.parentElement.previousElementSibling;

  var hidden   = selected.previousElementSibling;

  hidden.value = selected.dataset.value = value;

  selected.children[0].innerText = text;

  if (this.classList.contains("placeholder")) {

    selected.classList.add("placeholder");

  } else {

    selected.classList.remove("placeholder");

  }

  selected.parentElement.classList.remove("visible");

});



// open select dropdown

$(".ul-select-container .selected").on("click", function() {

  if (this.parentElement.classList.contains("visible")) {

    this.parentElement.classList.remove("visible");

  } else {

    this.parentElement.classList.add("visible");

  }

});



// close select when focus is lost

$(document).on("click", function(e) {

  var container = $(e.target).closest(".ul-select-container");

  if (container.length == 0) {

    $(".ul-select-container.visible").removeClass("visible");

  }

});

.ul-select-container {

  width: 200px;

  display: table;

  position: relative;

  margin: 1em 0;

}

.ul-select-container.visible ul {

  display: block;

  padding: 0;

  list-style: none;

  margin: 0;

}

.ul-select-container ul {

  background-color: white;

  border: 1px solid hsla(0, 0%, 60%);

  border-top: none;

  -webkit-user-select: none;

  display: none;

  position: absolute;

  width: 100%;

  z-index: 999;

}

.ul-select-container ul li {

  padding: 2px 5px;

}

.ul-select-container ul li.placeholder {

  opacity: 0.5;

}

.ul-select-container ul li:hover {

  background-color: dodgerblue;

  color: white;

}

.ul-select-container ul li.placeholder:hover {

  background-color: rgba(0, 0, 0, .1);

  color: initial;

}

.ul-select-container .selected {

  background-color: white;

  padding: 3px 10px 4px;

  padding: 2px 5px;

  border: 1px solid hsla(0, 0%, 60%);

  -webkit-user-select: none;

}

.ul-select-container .selected {

  display: flex;

  justify-content: space-between;

}

.ul-select-container .selected.placeholder .text {

  color: rgba(0, 0, 0, .5);

}

.ul-select-container .selected .icon {

  font-size: .7em;

  display: flex;

  align-items: center;

  opacity: 0.8;

}

.ul-select-container:hover .selected {

  border: 1px solid hsla(0, 0%, 30%);

}

.ul-select-container:hover .selected .icon {

  opacity: 1;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<ul class="select" data-placeholder="Role" data-name="role">

  <li data-value="admin">Administrator</li>

  <li data-value="mod">Moderator</li>

  <li data-value="user">User</li>

</ul>



<ul class="select" data-placeholder="Sex" data-name="sex">

  <li data-value="male">Male</li>

  <li data-value="female">Female</li>

</ul>

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:

<div class="li-select-container">

    <input type="text" readonly="" placeholder="Role" title="Role">

    <span class="arrow">▼</span>

    <ul class="select">

        <li class="placeholder">Role</li>

        <li data-value="admin">Administrator</li>

        <li data-value="mod">Moderator</li>

        <li data-value="user">User</li>

    </ul>

</div>

Initialization:

new Liselect(document.getElementsByTagName("ul")[0]);

For further examination: JSFiddle, ~~GitHub~~ (renamed).

Update: Rewritten this again. Instead of using a list, we can just use a select. This way it'll work even without JS (in case it's disabled).

Input:

<select name="role" data-placeholder="Role" required title="Role">

    <option value="admin">Administrator</option>

    <option value="mod">Moderator</option>

    <option>User</option>

</select>

new Advancelect(document.getElementsByTagName("select")[0]);

Output:

<div class="advanced-select">

    <input type="text" readonly="" placeholder="Role" title="Role" required="" name="role">

    <span class="arrow">▼</span>

    <ul>

        <li class="placeholder">Role</li>

        <li data-value="admin">Administrator</li>

        <li data-value="mod">Moderator</li>

        <li>User</li>

    </ul>

</div>

JSFiddle, GitHub.

edited Jun 28 '18 at 14:03

answered Jun 13 '18 at 14:58

akinuri

3,64152554

I'm not content with HTML/CSS only solutions, so I've decided to create a custom select using JS.

This is something I've written in the past 30 mins, thus it can be further improved.

Input:

<ul class="select" data-placeholder="Role" data-name="role">

  <li data-value="admin">Administrator</li>

  <li data-value="mod">Moderator</li>

  <li data-value="user">User</li>

</ul>

Output:

<div class="ul-select-container">

    <input type="hidden" name="role" class="hidden">

    <div class="selected placeholder">

        <span class="text">Role</span>

        <span class="icon">▼</span>

    </div>

    <ul class="select" data-placeholder="Role" data-name="role">

        <li class="placeholder">Role</li>

        <li data-value="admin">Administrator</li>

        <li data-value="mod">Moderator</li>

        <li data-value="user">User</li>

    </ul>

</div>

// helper function to create elements faster/easier

// https://github.com/akinuri/js-lib/blob/master/element.js

var elem = function(tagName, attributes, children, isHTML) {

  let parent;

  if (typeof tagName == "string") {

    parent = document.createElement(tagName);

  } else if (tagName instanceof HTMLElement) {

    parent = tagName;

  }

  if (attributes) {

    for (let attribute in attributes) {

      parent.setAttribute(attribute, attributes[attribute]);

    }

  }

  var isHTML = isHTML || null;

  if (children || children == 0) {

    elem.append(parent, children, isHTML);

  }

  return parent;

};

elem.append = function(parent, children, isHTML) {

  if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) {

    if (children instanceof Text || typeof children == "string" || typeof children == "number") {

      parent.value = children;

    } else if (children instanceof Array) {

      children.forEach(function(child) {

        elem.append(parent, child);

      });

    } else if (typeof children == "function") {

      elem.append(parent, children());

    }

  } else {

    if (children instanceof HTMLElement || children instanceof Text) {

      parent.appendChild(children);

    } else if (typeof children == "string" || typeof children == "number") {

      if (isHTML) {

        parent.innerHTML += children;

      } else {

        parent.appendChild(document.createTextNode(children));

      }

    } else if (children instanceof Array) {

      children.forEach(function(child) {

        elem.append(parent, child);

      });

    } else if (typeof children == "function") {

      elem.append(parent, children());

    }

  }

};





// initialize all selects on the page

$("ul.select").each(function() {

  var parent    = this.parentElement;

  var refElem   = this.nextElementSibling;

  var container = elem("div", {"class": "ul-select-container"});

  var hidden    = elem("input", {"type": "hidden", "name": this.dataset.name, "class": "hidden"});

  var selected  = elem("div", {"class": "selected placeholder"}, [

    elem("span", {"class": "text"}, this.dataset.placeholder),

    elem("span", {"class": "icon"}, "▼", true),

  ]);

  var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder);

  this.insertBefore(placeholder, this.children[0]);

  container.appendChild(hidden);

  container.appendChild(selected);

  container.appendChild(this);

  parent.insertBefore(container, refElem);

});



// update necessary elements with the selected option

$(".ul-select-container ul li").on("click", function() {

  var text     = this.innerText;

  var value    = this.dataset.value || "";

  var selected = this.parentElement.previousElementSibling;

  var hidden   = selected.previousElementSibling;

  hidden.value = selected.dataset.value = value;

  selected.children[0].innerText = text;

  if (this.classList.contains("placeholder")) {

    selected.classList.add("placeholder");

  } else {

    selected.classList.remove("placeholder");

  }

  selected.parentElement.classList.remove("visible");

});



// open select dropdown

$(".ul-select-container .selected").on("click", function() {

  if (this.parentElement.classList.contains("visible")) {

    this.parentElement.classList.remove("visible");

  } else {

    this.parentElement.classList.add("visible");

  }

});



// close select when focus is lost

$(document).on("click", function(e) {

  var container = $(e.target).closest(".ul-select-container");

  if (container.length == 0) {

    $(".ul-select-container.visible").removeClass("visible");

  }

});

.ul-select-container {

  width: 200px;

  display: table;

  position: relative;

  margin: 1em 0;

}

.ul-select-container.visible ul {

  display: block;

  padding: 0;

  list-style: none;

  margin: 0;

}

.ul-select-container ul {

  background-color: white;

  border: 1px solid hsla(0, 0%, 60%);

  border-top: none;

  -webkit-user-select: none;

  display: none;

  position: absolute;

  width: 100%;

  z-index: 999;

}

.ul-select-container ul li {

  padding: 2px 5px;

}

.ul-select-container ul li.placeholder {

  opacity: 0.5;

}

.ul-select-container ul li:hover {

  background-color: dodgerblue;

  color: white;

}

.ul-select-container ul li.placeholder:hover {

  background-color: rgba(0, 0, 0, .1);

  color: initial;

}

.ul-select-container .selected {

  background-color: white;

  padding: 3px 10px 4px;

  padding: 2px 5px;

  border: 1px solid hsla(0, 0%, 60%);

  -webkit-user-select: none;

}

.ul-select-container .selected {

  display: flex;

  justify-content: space-between;

}

.ul-select-container .selected.placeholder .text {

  color: rgba(0, 0, 0, .5);

}

.ul-select-container .selected .icon {

  font-size: .7em;

  display: flex;

  align-items: center;

  opacity: 0.8;

}

.ul-select-container:hover .selected {

  border: 1px solid hsla(0, 0%, 30%);

}

.ul-select-container:hover .selected .icon {

  opacity: 1;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<ul class="select" data-placeholder="Role" data-name="role">

  <li data-value="admin">Administrator</li>

  <li data-value="mod">Moderator</li>

  <li data-value="user">User</li>

</ul>



<ul class="select" data-placeholder="Sex" data-name="sex">

  <li data-value="male">Male</li>

  <li data-value="female">Female</li>

</ul>

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:

<div class="li-select-container">

    <input type="text" readonly="" placeholder="Role" title="Role">

    <span class="arrow">▼</span>

    <ul class="select">

        <li class="placeholder">Role</li>

        <li data-value="admin">Administrator</li>

        <li data-value="mod">Moderator</li>

        <li data-value="user">User</li>

    </ul>

</div>

Initialization:

new Liselect(document.getElementsByTagName("ul")[0]);

For further examination: JSFiddle, ~~GitHub~~ (renamed).

Update: Rewritten this again. Instead of using a list, we can just use a select. This way it'll work even without JS (in case it's disabled).

Input:

<select name="role" data-placeholder="Role" required title="Role">

    <option value="admin">Administrator</option>

    <option value="mod">Moderator</option>

    <option>User</option>

</select>

new Advancelect(document.getElementsByTagName("select")[0]);

Output:

<div class="advanced-select">

    <input type="text" readonly="" placeholder="Role" title="Role" required="" name="role">

    <span class="arrow">▼</span>

    <ul>

        <li class="placeholder">Role</li>

        <li data-value="admin">Administrator</li>

        <li data-value="mod">Moderator</li>

        <li>User</li>

    </ul>

</div>

JSFiddle, GitHub.

// helper function to create elements faster/easier

// https://github.com/akinuri/js-lib/blob/master/element.js

var elem = function(tagName, attributes, children, isHTML) {

  let parent;

  if (typeof tagName == "string") {

    parent = document.createElement(tagName);

  } else if (tagName instanceof HTMLElement) {

    parent = tagName;

  }

  if (attributes) {

    for (let attribute in attributes) {

      parent.setAttribute(attribute, attributes[attribute]);

    }

  }

  var isHTML = isHTML || null;

  if (children || children == 0) {

    elem.append(parent, children, isHTML);

  }

  return parent;

};

elem.append = function(parent, children, isHTML) {

  if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) {

    if (children instanceof Text || typeof children == "string" || typeof children == "number") {

      parent.value = children;

    } else if (children instanceof Array) {

      children.forEach(function(child) {

        elem.append(parent, child);

      });

    } else if (typeof children == "function") {

      elem.append(parent, children());

    }

  } else {

    if (children instanceof HTMLElement || children instanceof Text) {

      parent.appendChild(children);

    } else if (typeof children == "string" || typeof children == "number") {

      if (isHTML) {

        parent.innerHTML += children;

      } else {

        parent.appendChild(document.createTextNode(children));

      }

    } else if (children instanceof Array) {

      children.forEach(function(child) {

        elem.append(parent, child);

      });

    } else if (typeof children == "function") {

      elem.append(parent, children());

    }

  }

};





// initialize all selects on the page

$("ul.select").each(function() {

  var parent    = this.parentElement;

  var refElem   = this.nextElementSibling;

  var container = elem("div", {"class": "ul-select-container"});

  var hidden    = elem("input", {"type": "hidden", "name": this.dataset.name, "class": "hidden"});

  var selected  = elem("div", {"class": "selected placeholder"}, [

    elem("span", {"class": "text"}, this.dataset.placeholder),

    elem("span", {"class": "icon"}, "▼", true),

  ]);

  var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder);

  this.insertBefore(placeholder, this.children[0]);

  container.appendChild(hidden);

  container.appendChild(selected);

  container.appendChild(this);

  parent.insertBefore(container, refElem);

});



// update necessary elements with the selected option

$(".ul-select-container ul li").on("click", function() {

  var text     = this.innerText;

  var value    = this.dataset.value || "";

  var selected = this.parentElement.previousElementSibling;

  var hidden   = selected.previousElementSibling;

  hidden.value = selected.dataset.value = value;

  selected.children[0].innerText = text;

  if (this.classList.contains("placeholder")) {

    selected.classList.add("placeholder");

  } else {

    selected.classList.remove("placeholder");

  }

  selected.parentElement.classList.remove("visible");

});



// open select dropdown

$(".ul-select-container .selected").on("click", function() {

  if (this.parentElement.classList.contains("visible")) {

    this.parentElement.classList.remove("visible");

  } else {

    this.parentElement.classList.add("visible");

  }

});



// close select when focus is lost

$(document).on("click", function(e) {

  var container = $(e.target).closest(".ul-select-container");

  if (container.length == 0) {

    $(".ul-select-container.visible").removeClass("visible");

  }

});

.ul-select-container {

  width: 200px;

  display: table;

  position: relative;

  margin: 1em 0;

}

.ul-select-container.visible ul {

  display: block;

  padding: 0;

  list-style: none;

  margin: 0;

}

.ul-select-container ul {

  background-color: white;

  border: 1px solid hsla(0, 0%, 60%);

  border-top: none;

  -webkit-user-select: none;

  display: none;

  position: absolute;

  width: 100%;

  z-index: 999;

}

.ul-select-container ul li {

  padding: 2px 5px;

}

.ul-select-container ul li.placeholder {

  opacity: 0.5;

}

.ul-select-container ul li:hover {

  background-color: dodgerblue;

  color: white;

}

.ul-select-container ul li.placeholder:hover {

  background-color: rgba(0, 0, 0, .1);

  color: initial;

}

.ul-select-container .selected {

  background-color: white;

  padding: 3px 10px 4px;

  padding: 2px 5px;

  border: 1px solid hsla(0, 0%, 60%);

  -webkit-user-select: none;

}

.ul-select-container .selected {

  display: flex;

  justify-content: space-between;

}

.ul-select-container .selected.placeholder .text {

  color: rgba(0, 0, 0, .5);

}

.ul-select-container .selected .icon {

  font-size: .7em;

  display: flex;

  align-items: center;

  opacity: 0.8;

}

.ul-select-container:hover .selected {

  border: 1px solid hsla(0, 0%, 30%);

}

.ul-select-container:hover .selected .icon {

  opacity: 1;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<ul class="select" data-placeholder="Role" data-name="role">

  <li data-value="admin">Administrator</li>

  <li data-value="mod">Moderator</li>

  <li data-value="user">User</li>

</ul>



<ul class="select" data-placeholder="Sex" data-name="sex">

  <li data-value="male">Male</li>

  <li data-value="female">Female</li>

</ul>

// helper function to create elements faster/easier

// https://github.com/akinuri/js-lib/blob/master/element.js

var elem = function(tagName, attributes, children, isHTML) {

  let parent;

  if (typeof tagName == "string") {

    parent = document.createElement(tagName);

  } else if (tagName instanceof HTMLElement) {

    parent = tagName;

  }

  if (attributes) {

    for (let attribute in attributes) {

      parent.setAttribute(attribute, attributes[attribute]);

    }

  }

  var isHTML = isHTML || null;

  if (children || children == 0) {

    elem.append(parent, children, isHTML);

  }

  return parent;

};

elem.append = function(parent, children, isHTML) {

  if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) {

    if (children instanceof Text || typeof children == "string" || typeof children == "number") {

      parent.value = children;

    } else if (children instanceof Array) {

      children.forEach(function(child) {

        elem.append(parent, child);

      });

    } else if (typeof children == "function") {

      elem.append(parent, children());

    }

  } else {

    if (children instanceof HTMLElement || children instanceof Text) {

      parent.appendChild(children);

    } else if (typeof children == "string" || typeof children == "number") {

      if (isHTML) {

        parent.innerHTML += children;

      } else {

        parent.appendChild(document.createTextNode(children));

      }

    } else if (children instanceof Array) {

      children.forEach(function(child) {

        elem.append(parent, child);

      });

    } else if (typeof children == "function") {

      elem.append(parent, children());

    }

  }

};





// initialize all selects on the page

$("ul.select").each(function() {

  var parent    = this.parentElement;

  var refElem   = this.nextElementSibling;

  var container = elem("div", {"class": "ul-select-container"});

  var hidden    = elem("input", {"type": "hidden", "name": this.dataset.name, "class": "hidden"});

  var selected  = elem("div", {"class": "selected placeholder"}, [

    elem("span", {"class": "text"}, this.dataset.placeholder),

    elem("span", {"class": "icon"}, "▼", true),

  ]);

  var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder);

  this.insertBefore(placeholder, this.children[0]);

  container.appendChild(hidden);

  container.appendChild(selected);

  container.appendChild(this);

  parent.insertBefore(container, refElem);

});



// update necessary elements with the selected option

$(".ul-select-container ul li").on("click", function() {

  var text     = this.innerText;

  var value    = this.dataset.value || "";

  var selected = this.parentElement.previousElementSibling;

  var hidden   = selected.previousElementSibling;

  hidden.value = selected.dataset.value = value;

  selected.children[0].innerText = text;

  if (this.classList.contains("placeholder")) {

    selected.classList.add("placeholder");

  } else {

    selected.classList.remove("placeholder");

  }

  selected.parentElement.classList.remove("visible");

});



// open select dropdown

$(".ul-select-container .selected").on("click", function() {

  if (this.parentElement.classList.contains("visible")) {

    this.parentElement.classList.remove("visible");

  } else {

    this.parentElement.classList.add("visible");

  }

});



// close select when focus is lost

$(document).on("click", function(e) {

  var container = $(e.target).closest(".ul-select-container");

  if (container.length == 0) {

    $(".ul-select-container.visible").removeClass("visible");

  }

});

.ul-select-container {

  width: 200px;

  display: table;

  position: relative;

  margin: 1em 0;

}

.ul-select-container.visible ul {

  display: block;

  padding: 0;

  list-style: none;

  margin: 0;

}

.ul-select-container ul {

  background-color: white;

  border: 1px solid hsla(0, 0%, 60%);

  border-top: none;

  -webkit-user-select: none;

  display: none;

  position: absolute;

  width: 100%;

  z-index: 999;

}

.ul-select-container ul li {

  padding: 2px 5px;

}

.ul-select-container ul li.placeholder {

  opacity: 0.5;

}

.ul-select-container ul li:hover {

  background-color: dodgerblue;

  color: white;

}

.ul-select-container ul li.placeholder:hover {

  background-color: rgba(0, 0, 0, .1);

  color: initial;

}

.ul-select-container .selected {

  background-color: white;

  padding: 3px 10px 4px;

  padding: 2px 5px;

  border: 1px solid hsla(0, 0%, 60%);

  -webkit-user-select: none;

}

.ul-select-container .selected {

  display: flex;

  justify-content: space-between;

}

.ul-select-container .selected.placeholder .text {

  color: rgba(0, 0, 0, .5);

}

.ul-select-container .selected .icon {

  font-size: .7em;

  display: flex;

  align-items: center;

  opacity: 0.8;

}

.ul-select-container:hover .selected {

  border: 1px solid hsla(0, 0%, 30%);

}

.ul-select-container:hover .selected .icon {

  opacity: 1;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<ul class="select" data-placeholder="Role" data-name="role">

  <li data-value="admin">Administrator</li>

  <li data-value="mod">Moderator</li>

  <li data-value="user">User</li>

</ul>



<ul class="select" data-placeholder="Sex" data-name="sex">

  <li data-value="male">Male</li>

  <li data-value="female">Female</li>

</ul>

edited Jun 28 '18 at 14:03

answered Jun 13 '18 at 14:58

akinuri

3,64152554

edited Jun 28 '18 at 14:03

answered Jun 13 '18 at 14:58

akinuri

3,64152554

answered Jun 13 '18 at 14:58

akinuri

3,64152554

answered Jun 13 '18 at 14:58

akinuri

3,64152554

add a comment |

Input `[type="text"]` Style Placeholder for Select Elements

The following solution simulates a placeholder as it relates to an input[type="text"] element:

$('.example').change(function () {

  $(this).css('color', $(this).val() === '' ? '#999' : '#555');

});

.example {

  color: #999;

}



.example > option {

  color: #555;

}



.example > option[value=""] {

  color: #999;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<select class="example">

  <option value="">Select Option</option>

  <option>Option 1</option>

  <option>Option 2</option>

  <option>Option 3</option>

</select>

edited Nov 22 '18 at 0:04

answered May 29 '18 at 16:19

Grant Miller

6,015133055

add a comment |

Input `[type="text"]` Style Placeholder for Select Elements

The following solution simulates a placeholder as it relates to an input[type="text"] element:

$('.example').change(function () {

  $(this).css('color', $(this).val() === '' ? '#999' : '#555');

});

.example {

  color: #999;

}



.example > option {

  color: #555;

}



.example > option[value=""] {

  color: #999;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<select class="example">

  <option value="">Select Option</option>

  <option>Option 1</option>

  <option>Option 2</option>

  <option>Option 3</option>

</select>

edited Nov 22 '18 at 0:04

answered May 29 '18 at 16:19

Grant Miller

6,015133055

add a comment |

Input `[type="text"]` Style Placeholder for Select Elements

The following solution simulates a placeholder as it relates to an input[type="text"] element:

$('.example').change(function () {

  $(this).css('color', $(this).val() === '' ? '#999' : '#555');

});

.example {

  color: #999;

}



.example > option {

  color: #555;

}



.example > option[value=""] {

  color: #999;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<select class="example">

  <option value="">Select Option</option>

  <option>Option 1</option>

  <option>Option 2</option>

  <option>Option 3</option>

</select>

edited Nov 22 '18 at 0:04

answered May 29 '18 at 16:19

Grant Miller

6,015133055

Input `[type="text"]` Style Placeholder for Select Elements

The following solution simulates a placeholder as it relates to an input[type="text"] element:

$('.example').change(function () {

  $(this).css('color', $(this).val() === '' ? '#999' : '#555');

});

.example {

  color: #999;

}



.example > option {

  color: #555;

}



.example > option[value=""] {

  color: #999;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<select class="example">

  <option value="">Select Option</option>

  <option>Option 1</option>

  <option>Option 2</option>

  <option>Option 3</option>

</select>

$('.example').change(function () {

  $(this).css('color', $(this).val() === '' ? '#999' : '#555');

});

.example {

  color: #999;

}



.example > option {

  color: #555;

}



.example > option[value=""] {

  color: #999;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<select class="example">

  <option value="">Select Option</option>

  <option>Option 1</option>

  <option>Option 2</option>

  <option>Option 3</option>

</select>

$('.example').change(function () {

  $(this).css('color', $(this).val() === '' ? '#999' : '#555');

});

.example {

  color: #999;

}



.example > option {

  color: #555;

}



.example > option[value=""] {

  color: #999;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<select class="example">

  <option value="">Select Option</option>

  <option>Option 1</option>

  <option>Option 2</option>

  <option>Option 3</option>

</select>

edited Nov 22 '18 at 0:04

answered May 29 '18 at 16:19

Grant Miller

6,015133055

edited Nov 22 '18 at 0:04

answered May 29 '18 at 16:19

Grant Miller

6,015133055

answered May 29 '18 at 16:19

Grant Miller

6,015133055

answered May 29 '18 at 16:19

Grant Miller

6,015133055

add a comment |

I love the accepted solution above and it works great without JavaScript.

Such as, for example

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>

    {options}

</select>

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

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>

    <option key="someKey" value="" disabled="disabled" hidden="hidden">Select from Below</option>

    {renderOptions()}

</select>

Now you can style the select as indicated above( or via a className if you prefer )

select:invalid { color: gray; }

answered Jan 16 at 18:34

wlh

1,8701823

add a comment |

I love the accepted solution above and it works great without JavaScript.

Such as, for example

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>

    {options}

</select>

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

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>

    <option key="someKey" value="" disabled="disabled" hidden="hidden">Select from Below</option>

    {renderOptions()}

</select>

Now you can style the select as indicated above( or via a className if you prefer )

select:invalid { color: gray; }

answered Jan 16 at 18:34

wlh

1,8701823

add a comment |

I love the accepted solution above and it works great without JavaScript.

Such as, for example

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>

    {options}

</select>

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

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>

    <option key="someKey" value="" disabled="disabled" hidden="hidden">Select from Below</option>

    {renderOptions()}

</select>

Now you can style the select as indicated above( or via a className if you prefer )

select:invalid { color: gray; }

answered Jan 16 at 18:34

wlh

1,8701823

I love the accepted solution above and it works great without JavaScript.

Such as, for example

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>

    {options}

</select>

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

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>

    <option key="someKey" value="" disabled="disabled" hidden="hidden">Select from Below</option>

    {renderOptions()}

</select>

Now you can style the select as indicated above( or via a className if you prefer )

select:invalid { color: gray; }

answered Jan 16 at 18:34

wlh

1,8701823

answered Jan 16 at 18:34

wlh

1,8701823

answered Jan 16 at 18:34

wlh

1,8701823

answered Jan 16 at 18:34

wlh

1,8701823

add a comment |

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

 <div class="dropdown">

      <select [ngClass]="{'placeholder': !myForm.value.myField}"

 class="form-control" formControlName="myField">

        <option value="" hidden >Select a Gender</option>

        <option value="Male">Male</option>

        <option value="Female">Female</option>

      </select>

    </div>

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

    &::-ms-expand {

      display: none;

    }

    /*For chrome*/

    -webkit-appearance:none;

    &.placeholder {

      opacity: 0.7;

      color: theme-color('mutedColor');

    }

    option {

      color: black;

    }

  }

}

answered Jan 26 at 12:10

Mukundhan

827512

add a comment |

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

 <div class="dropdown">

      <select [ngClass]="{'placeholder': !myForm.value.myField}"

 class="form-control" formControlName="myField">

        <option value="" hidden >Select a Gender</option>

        <option value="Male">Male</option>

        <option value="Female">Female</option>

      </select>

    </div>

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

    &::-ms-expand {

      display: none;

    }

    /*For chrome*/

    -webkit-appearance:none;

    &.placeholder {

      opacity: 0.7;

      color: theme-color('mutedColor');

    }

    option {

      color: black;

    }

  }

}

answered Jan 26 at 12:10

Mukundhan

827512

add a comment |

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

 <div class="dropdown">

      <select [ngClass]="{'placeholder': !myForm.value.myField}"

 class="form-control" formControlName="myField">

        <option value="" hidden >Select a Gender</option>

        <option value="Male">Male</option>

        <option value="Female">Female</option>

      </select>

    </div>

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

    &::-ms-expand {

      display: none;

    }

    /*For chrome*/

    -webkit-appearance:none;

    &.placeholder {

      opacity: 0.7;

      color: theme-color('mutedColor');

    }

    option {

      color: black;

    }

  }

}

answered Jan 26 at 12:10

Mukundhan

827512

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

 <div class="dropdown">

      <select [ngClass]="{'placeholder': !myForm.value.myField}"

 class="form-control" formControlName="myField">

        <option value="" hidden >Select a Gender</option>

        <option value="Male">Male</option>

        <option value="Female">Female</option>

      </select>

    </div>

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

    &::-ms-expand {

      display: none;

    }

    /*For chrome*/

    -webkit-appearance:none;

    &.placeholder {

      opacity: 0.7;

      color: theme-color('mutedColor');

    }

    option {

      color: black;

    }

  }

}

answered Jan 26 at 12:10

Mukundhan

827512

answered Jan 26 at 12:10

Mukundhan

827512

answered Jan 26 at 12:10

Mukundhan

827512

answered Jan 26 at 12:10

Mukundhan

827512

add a comment |

-2

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

    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.

$('select').on('change', function() {

  if ($(this).val()) {

    return $(this).css('color', 'black');

  } else {

    return $(this).css('color', 'gray');

  }

});



$('select').change();

    select option {

      color: black;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" name="user[country_id]" id="user_country_id">

  <option value="">Country</option>

                      <option value="231">United States</option>

                      <option value="1">Andorra</option>

                      <option value="2">Afghanistan</option>

                      <option value="248">Zimbabwe</option></select>

You can add more CSS (select option:first-child) to keep the placeholder gray when it opens, but I didn't care about that.

answered Sep 25 '17 at 4:42

Chloe

10.9k1979193

add a comment |

-2

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

    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.

$('select').on('change', function() {

  if ($(this).val()) {

    return $(this).css('color', 'black');

  } else {

    return $(this).css('color', 'gray');

  }

});



$('select').change();

    select option {

      color: black;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" name="user[country_id]" id="user_country_id">

  <option value="">Country</option>

                      <option value="231">United States</option>

                      <option value="1">Andorra</option>

                      <option value="2">Afghanistan</option>

                      <option value="248">Zimbabwe</option></select>

You can add more CSS (select option:first-child) to keep the placeholder gray when it opens, but I didn't care about that.

answered Sep 25 '17 at 4:42

Chloe

10.9k1979193

add a comment |

-2

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

    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.

$('select').on('change', function() {

  if ($(this).val()) {

    return $(this).css('color', 'black');

  } else {

    return $(this).css('color', 'gray');

  }

});



$('select').change();

    select option {

      color: black;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" name="user[country_id]" id="user_country_id">

  <option value="">Country</option>

                      <option value="231">United States</option>

                      <option value="1">Andorra</option>

                      <option value="2">Afghanistan</option>

                      <option value="248">Zimbabwe</option></select>

You can add more CSS (select option:first-child) to keep the placeholder gray when it opens, but I didn't care about that.

answered Sep 25 '17 at 4:42

Chloe

10.9k1979193

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

    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.

$('select').on('change', function() {

  if ($(this).val()) {

    return $(this).css('color', 'black');

  } else {

    return $(this).css('color', 'gray');

  }

});



$('select').change();

    select option {

      color: black;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" name="user[country_id]" id="user_country_id">

  <option value="">Country</option>

                      <option value="231">United States</option>

                      <option value="1">Andorra</option>

                      <option value="2">Afghanistan</option>

                      <option value="248">Zimbabwe</option></select>

You can add more CSS (select option:first-child) to keep the placeholder gray when it opens, but I didn't care about that.

$('select').on('change', function() {

  if ($(this).val()) {

    return $(this).css('color', 'black');

  } else {

    return $(this).css('color', 'gray');

  }

});



$('select').change();

    select option {

      color: black;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" name="user[country_id]" id="user_country_id">

  <option value="">Country</option>

                      <option value="231">United States</option>

                      <option value="1">Andorra</option>

                      <option value="2">Afghanistan</option>

                      <option value="248">Zimbabwe</option></select>

$('select').on('change', function() {

  if ($(this).val()) {

    return $(this).css('color', 'black');

  } else {

    return $(this).css('color', 'gray');

  }

});



$('select').change();

    select option {

      color: black;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" name="user[country_id]" id="user_country_id">

  <option value="">Country</option>

                      <option value="231">United States</option>

                      <option value="1">Andorra</option>

                      <option value="2">Afghanistan</option>

                      <option value="248">Zimbabwe</option></select>

answered Sep 25 '17 at 4:42

Chloe

10.9k1979193

answered Sep 25 '17 at 4:42

Chloe

10.9k1979193

answered Sep 25 '17 at 4:42

Chloe

10.9k1979193

answered Sep 25 '17 at 4:42

Chloe

10.9k1979193

add a comment |

-6

~~In respect to all solutions above, but this one seems to be most valid due to HTML specs:~~

<select>

  <optgroup label="Your placeholder">

    <option value="value">Label</option>

  </optgroup>

</select>

UPDATE: Pardon me for this incorrect answer, this is definitely not a placeholder solution for the select element, but a title for grouped options under opened select element list.

edited May 23 '17 at 3:23

answered Mar 28 '16 at 15:26

dr.dimitru

2,1021532

5

this answer is not correct at all , Optgroup is like a header legend to collect complex options .

– Hos Mercury
Aug 21 '16 at 1:03

add a comment |

-6

~~In respect to all solutions above, but this one seems to be most valid due to HTML specs:~~

<select>

  <optgroup label="Your placeholder">

    <option value="value">Label</option>

  </optgroup>

</select>

UPDATE: Pardon me for this incorrect answer, this is definitely not a placeholder solution for the select element, but a title for grouped options under opened select element list.

edited May 23 '17 at 3:23

answered Mar 28 '16 at 15:26

dr.dimitru

2,1021532

5

this answer is not correct at all , Optgroup is like a header legend to collect complex options .

– Hos Mercury
Aug 21 '16 at 1:03

add a comment |

-6

~~In respect to all solutions above, but this one seems to be most valid due to HTML specs:~~

<select>

  <optgroup label="Your placeholder">

    <option value="value">Label</option>

  </optgroup>

</select>

UPDATE: Pardon me for this incorrect answer, this is definitely not a placeholder solution for the select element, but a title for grouped options under opened select element list.

edited May 23 '17 at 3:23

answered Mar 28 '16 at 15:26

dr.dimitru

2,1021532

~~In respect to all solutions above, but this one seems to be most valid due to HTML specs:~~

<select>

  <optgroup label="Your placeholder">

    <option value="value">Label</option>

  </optgroup>

</select>

UPDATE: Pardon me for this incorrect answer, this is definitely not a placeholder solution for the select element, but a title for grouped options under opened select element list.

edited May 23 '17 at 3:23

answered Mar 28 '16 at 15:26

dr.dimitru

2,1021532

edited May 23 '17 at 3:23

answered Mar 28 '16 at 15:26

dr.dimitru

2,1021532

answered Mar 28 '16 at 15:26

dr.dimitru

2,1021532

answered Mar 28 '16 at 15:26

dr.dimitru

2,1021532

5

this answer is not correct at all , Optgroup is like a header legend to collect complex options .

– Hos Mercury
Aug 21 '16 at 1:03

add a comment |

5

this answer is not correct at all , Optgroup is like a header legend to collect complex options .

– Hos Mercury
Aug 21 '16 at 1:03

this answer is not correct at all , Optgroup is like a header legend to collect complex options .

– Hos Mercury
Aug 21 '16 at 1:03

add a comment |

protected by Josh Crozier Aug 30 '14 at 21:50

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu