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    lt select gt       lt option gt English lt  option gt       lt option gt Spanish lt  option gt   lt  select gt     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

User · Answer

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

User · Answer

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    lt option selected  selected  gt Select a language lt  option gt    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

User · Answer

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    lt option selected  selected  disabled  disabled  gt Select a language lt  option gt    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

User · Answer

Just make option 1 Select Language   Live Demo

User · Answer

x000D   x000D   selectmenu  x000D     x000D   -webkit-appearance  none     Removes default chrome and safari style   x000D   -moz-appearance  none     Removes Default Firefox style   x000D   background   0088cc   x000D   width  200px    Width of select dropdown to give space for arrow image   x000D   text-indent  0 01px     Removes default arrow from firefox   x000D   text-overflow         Removes default arrow from firefox     My custom style for fonts   x000D   color   FFF  x000D   border-radius  2px  x000D   padding  5px  x000D      border 0  important  x000D   box-shadow  inset 0 0 5px rgba 000 000 000  0 5   x000D    x000D   hideoption   display none  visibility hidden  height 0  font-size 0    x000D  Try this html x000D   x000D   lt select class  selectmenu  gt  x000D   lt option selected disabled class  hideoption  gt Select language lt  option gt  x000D   lt option gt Option 1 lt  option gt  x000D   lt option gt Option 2 lt  option gt  x000D   lt option gt Option 3 lt  option gt  x000D   lt option gt Option 4 lt  option gt  x000D   lt option gt Option 5 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

Put your prompt in the 1st option and disable it    lt selection gt       lt option disabled selected gt    Select a language    lt  option gt       lt option gt English lt  option gt       lt option gt Spanish lt  option gt   lt  selection gt    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           lt selection required gt       lt option disabled value        gt Select a language lt  option gt       lt option gt English lt  option gt       lt option gt Spanish lt  option gt   lt  selection gt

User · Answer

lt option value    selected disabled hidden gt Default Text lt  option gt    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   lt select asp-for  Property  asp-items  Html GetEnumSelectList lt PropertyEnum gt     gt                           lt option value    selected disabled hidden gt Select Property Enum lt  option gt                           lt option value    gt  lt  option gt                       lt  select gt

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

Examples related to html

Examples related to html-select