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

    |
  • Added:
  • |
  • In: Wordpress

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; } 
This Question Has 15 Answeres | Orginal Question | Thomas

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

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>

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.

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>

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.

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>

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>

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

I wrap all of my inputs in AngularJs and so can take advantage of the fact that my select is wrapped in a containing element. Also, angular is nice enough to add/remove .ng-empty class for me on the element. Note that doing these 2 things yourself is not a big deal if you are not using Angular.

So now it's a CSS only approach where content is added (and absolutely positioned relative to the container) after the containing element (:after). 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.

.fh-select-container { position: relative; &.ng-empty { &:after { content: attr(placeholder); position: absolute; pointer-events: none; // pass through element so ignore clicks top: 2px; left: 6px; z-index: 0; color: #888; } } } 

And I use it like so

<xx-select ng-model="vm.foo" value-property="id" display-property="name" source="vm.fooCollection" placeholder="(select a foo)"></xx-select> 

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/

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>

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

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> 

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

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

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>


Search
I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

Connect Social With PHPAns
Top