How do I set an un-selectable default description in a select (drop-down) menu in HTML?

Question

I have a drop down where the user selects a language:

<select>
    <option>English</option>
    <option>Spanish</option>
</select>

I want the default option that is initially displayed to say "Select a language" instead of "English" (my first option, displayed by default).
I don't want the user to be able to select "Select a language".

I could be wrong but i think the OP was meant to ask how to show some texts that doesn't belong to the options, like this one: [link](http://stackoverflow.com/questions/9447134/html-select-how-to-set-default-text-which-wont-be-shown-in-drop-down-list). Both Oded's and Myles's answers are for the situation that you want to show one of the options as the text. And by the way I don't think make it the first option like in Myles's solution is a good design. But this is just my personal opinion. — Yang Chi, Aug 24 '12 at 19:22

Glen Selle · Answer 1 · 2014-06-04T10:57:38.453

59

Building on Oded's answer, you could also set the default option but not make it a selectable option if it's just dummy text. For example you could do:

<option selected="selected" disabled="disabled">Select a language</option>

This would show "Select a language" before the user clicks the select box but the user wouldn't be able to select it because of the disabled attribute.

edited Jun 04 '14 at 10:57

answered May 13 '13 at 14:51

Glen Selle

3,966
4
37
59

I think it's simpler to take out the `selected="selected"` to just be `selected`. same for `disabled`. Submitted edit. Note that it can be good to include the value if using a parser, from another answer: "What I wrote is valid polyglot HTML/XML. Using – JBallin Jan 11 '18 at 23:36
I love stackoverflow – Tiago Feb 17 '22 at 16:34

Oded · Accepted Answer · 2011-03-06T19:58:32.087

If none of the options in the select have a selected attribute, the first option will be the one selected.

In order to select a default option that is not the first, add a selected attribute to that option:

<option selected="selected">Select a language</option>

You can read the HTML 4.01 spec regarding defaults in select element.

I suggest reading a good HTML book if you need to learn HTML basics like this - I recommend Head First HTML.

score 5 · Answer 3 · answered Jul 10 '15 at 03:36

.selectmenu{
  
 -webkit-appearance: none;  /*Removes default chrome and safari style*/
 -moz-appearance: none; /* Removes Default Firefox style*/
 background: #0088cc ;
 width: 200px; /*Width of select dropdown to give space for arrow image*/
 text-indent: 0.01px; /* Removes default arrow from firefox*/
 text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
 color: #FFF;
 border-radius: 2px;
 padding: 5px;
    border:0 !important;
 box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
}
.hideoption { display:none; visibility:hidden; height:0; font-size:0; }

Try this html

<select class="selectmenu">
<option selected disabled class="hideoption">Select language</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>

score 3 · Answer 4 · answered Mar 06 '11 at 19:51

3

Just make option#1 Select Language:

Live Demo

answered Mar 06 '11 at 19:51

Myles Gray

8,711
7
48
70

score 0 · Answer 5 · answered Jul 12 '17 at 20:36

<option value="" selected disabled hidden>Default Text</option>

Leaving the disabled flag in prevents them from not selecting an option and the hidden flag will remove it from the list. In my case I was using it with an enum list as well and the concept holds the same

<select asp-for="Property" asp-items="Html.GetEnumSelectList<PropertyEnum>()">
                        <option value="" selected disabled hidden>Select Property Enum</option>
                        <option value=""></option>
                    </select>

`hidden` doesn't work in all browsers but there's no harm in putting it there if you want some browsers not to show the option. i think in this case it's nice to have the "instruction" while viewing the options. — JBallin, Jan 11 '18 at 23:38

JBallin · Answer 6 · 2018-01-12T22:16:06.473

Put your prompt in the 1st option and disable it:

<selection>
    <option disabled selected>”Select a language”</option>
    <option>English</option>
    <option>Spanish</option>
</selection>

The first option will automatically be the selected default (what you see first when you look at the drop-down) but adding the selected attribute is more clear and actually needed when the first field is a disabled field.

The disabled attribute will make the option be un-selectable/grayed out.

Other answers suggest setting disabled=“disabled” but that’s only necessary if you need to parse as XHTML, which is basically a more strict version of HTML. disabled on it’s on is enough for standard HTML.

If you want to make the selection “required” (without accepting the “Select a language” option as an accepted answer):

Add the required attribute to selection and set the first option’s value to the empty string ””.

<selection required>
    <option disabled value=“”>Select a language</option>
    <option>English</option>
    <option>Spanish</option>
</selection>

score 0 · Answer 7 · answered Jan 24 '19 at 07:10

Although this question has an accepted answer but I think this is a much cleaner way to achieve the desired output

<select required>
<option value="">Select</option>
<option>English</option>
<option>Spanish</option>
</select>

The required attribute in makes it mandatory to select an option from the list.

value="" inside the option tag combined with the required attribute in select tag makes selection of 'Select' option not permissible, thus achieving the required output

How do I set an un-selectable default description in a select (drop-down) menu in HTML?

7 Answers7

Linked