A Placeholder for the `select` tag?

Question

I'm wondering how to achieve the placeholder effect with the select tag, it would be really nice to have the default selected option something like "Please Chose an Option:".

I have tried some variations and they are not working so far and I'm sure that it can be achieved cause i seen it somewhere (can't remember where).

I have tried this:

1)

<fieldset>
            <select data-placeholder="Please select a product" id="s1" class="global">
                <option value="Some">Some</option>
                <option value="Slower">Slower</option>
                <option value="Slow">Slow</option>
                <option value="Fast">Fast</option>
                <option value="Faster">Faster</option>
            </select>
</fieldset>

2)

<fieldset>
            <select id="s1" class="global">
                <option data-placeholder="true"  value="Some">Some</option>
                <option value="Slower">Slower</option>
                <option value="Slow">Slow</option>
                <option value="Fast">Fast</option>
                <option value="Faster">Faster</option>
            </select>
</fieldset>

Both are not working, maybe there is a jQuery method to make that?

Quick edit: I DON'T want to just disable one of the options and make it selected because it will still be showed in the drop-down list with the other items.

Already discussed here: http://stackoverflow.com/questions/5805059/select-placeholder There's also a live example: http://jsfiddle.net/Zmf6t/ (anyway it does not work so good on chrome...) — Luciano Mammino, Dec 03 '11 at 16:05
@FelipeAlsacreations - I don't want to do that this way, there is no just black and white and i may have different ideas from yours which can be achieved (I didn't asked for something impossible, I'm sure it can be done) or at least something close like Luciano and Truth suggested. — Ricardo, Dec 03 '11 at 17:33
Similar Question with a tested and accepted answer. http://stackoverflow.com/questions/17603055/placeholder-for-select-tag — Dalton Pereira, Mar 15 '14 at 12:21

score 30 · Accepted Answer · edited May 23 '17 at 12:24

Here's two types of placeholder, re-selectable and hidden:

Demo: http://jsfiddle.net/lachlan/FuNmc/

Re-selectable placeholder:

<select>
    <option value="" selected>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

Hidden placeholder:

<select class="empty">
    <option value="" selected disabled>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

CSS to change the colour of the first item:

select option { color: black; }
select option:first-child { color: grey; }
select.empty { color: grey; }
/* Hidden placeholder */
select option[disabled]:first-child { display: none; }

And a little jQuery to toggle the font-color after selection:

// Applies to all select boxes that have no value for their first option
$("select:has(option[value=]:first-child)").on('change', function() {
    $(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
}).trigger('change');

Inspiration:
https://stackoverflow.com/a/5805194/1196148 - re-selectable placeholder
https://stackoverflow.com/a/8442831/1196148 - hidden placeholder

score 4 · Answer 2 · edited Jun 15 '13 at 18:50

4

I've built a simple demo by following @Truth suggestion: http://jsfiddle.net/6QnXF/

(function($){
    $('#myAwesomeSelect').change(function(){
       if( !$(this).data('removedPlaceHolder'))
       {
          $(this).find('option:first').remove();
          $(this).data('removedPlaceHolder', true); 
       }
    });
})(jQuery);

I hope it works for you.

edited Jun 15 '13 at 18:50

Leniel Maccaferri

100,159
46
371
480

answered Dec 03 '11 at 16:12

Luciano Mammino

798
8
23

1

better than Truth's sugestion – defau1t Dec 03 '11 at 16:13
I guess it's the closest thing to what I'm trying to achieve, Thanks! ill wait another hour or so with the answer selection - maybe someone has the perfect solution. – Ricardo Dec 03 '11 at 16:26
Firefox (10) doesn't show the disabled option as the default selection (placeholder), but shows the next one (Option #1). – jarnoan Feb 27 '12 at 12:07
1

Same in IE 9. Option #1 is selected by default, and if I expand the dropdown, the default option shows in gray. I think you need to also add `selected="selected"` to the first item. – JLRishe Jan 17 '13 at 05:18

score 2 · Answer 3 · answered Dec 03 '11 at 16:00

2

As far as I know, there's no way doing it with HTML alone (though that would be nice.) You can fake it with a selected option (I know you don't want it, but it's probably the only way). Once another option is selected, you can remove it.

Here's a working example of what I describe.

answered Dec 03 '11 at 16:00

Madara's Ghost

172,118
50
264
308

Thanks for your answer, it looks good and close to the desired result, but still i hope someone has the full solution ;) – Ricardo Dec 03 '11 at 16:28
Chrome 22 shows the placeholder text in the same color as the other options, but Firefox 14 shows the placeholder text gray as intended. – Mike Eng Oct 10 '12 at 20:56

score 0 · Answer 4 · answered Jul 08 '23 at 21:35

try this: add this in css(style sheet):

select:required:invalid {
 color: #c4c4c4;
}
option[value=""][disabled] {
 display: none;
}
option {
 color: #232423;
}

and the HTML:

<select required>
 <option value="" disabled selected>Select a color</option>
 <option value="red">Red</option>
 <option value="green">Green</option>

score 0 · Answer 5 · answered Dec 03 '11 at 16:01

0

My guess is that you're going to have to construct your own workaround for a select box. Something like a series of divs that act as options which when clicked are shown and have their value inserted into a hidden input field.

answered Dec 03 '11 at 16:01

Dormouse

5,130
1
26
42

A Placeholder for the `select` tag?

5 Answers5

Linked