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: #000;
}

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
Meet with owner

Sajjad Hossain

Hey, I am Sajjad, working in web development sector since 2012. I love to do amazing things. Let's do a project together.
Connect Social With PHPAns
Top