How do I set an un-selectable default description in a select (drop-down) menu in HTML?
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.
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.
.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>