HTML select: how to set default text that will not appear in the drop-down list?

Question

I have a select that initially shows the select language until the user selects the language. When a user opens a selection, I don’t want them to see the "Language Selection" option because this is not an option.

Answer 1

Kyle solution is great for me, so I did my research to avoid Js and CSS, but just stuck with HTML. Adding the selected value to the element that we want to display as the header makes it show first as a placeholder. Something like:

 <option selected disabled>Choose here</option> 

Complete markup should be in the following order:

 <select> <option selected disabled>Choose here</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </select> 

You can take a look at this fiddle , and here is the result:

If you do not want the placeholder text view to appear in the list as soon as the user clicks on the selection field, just add the hidden attribute, for example:

 <select> <option selected disabled hidden>Choose here</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </select> 

Check out the fiddle here and the screenshot below.

Answer 2

Here is the solution:

 <select> <option style="display:none;" selected>Select language</option> <option>Option 1</option> <option>Option 2</option> </select> 

Answer 3

The correct and semantic way uses the labelholder parameter:

• Add an option element as the first child select
• Set value = "" to this option
• Set placeholder text as the content of this option
• Add the required select attribute

This will force the user to choose another option in order to be able to submit the form, and browsers should render option as desired:

If the select element contains a placeholder label, the user expects the agent to provide this parameter in a way that is the label, and not a valid control option.

However, most browsers will look like a regular option . Therefore, we will need to fix this manually by adding the following to option :

• selected to make it selected by default
• disabled to make it inaccessible to the user
• display: none to hide it from the list of values

 select > .placeholder { display: none; } 

 <select required> <option class="placeholder" selected disabled value="">Select language</option> <option>Option 1</option> <option>Option 2</option> </select> 

Answer 4

Since you cannot use assignment placeholders for select tags, I don’t think there is any way to do exactly what you are asking for using pure HTML / CSS. You can, however, do something like this:

 <select> <option disabled="disabled">Select language</option> <option>Option 1</option> </select> 

“Select language” appears in the drop-down list, but as soon as another parameter is selected, it cannot be re-selected.

I hope this helps.

Answer 5

I have a solution with a range displayed above the selection until a choice is made. A space displays the default message and therefore is not included in the list of sentences:

HTML:

 <span id="default_message_overlay">Default message</span> <select id="my_select"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> 

CSS

 #default_message_overlay { position: absolute; display: block; width: 120px; color: grey; } select { width: 150px; } 

Javascript (with jQuery):

 $(document).ready(function() { // No selection at start $('#my_select').prop("selectedIndex", -1); // Set the position of the overlay var offset = $('#my_select').offset(); offset.top += 3; offset.left += 3; $('#default_message_overlay').offset(offset); // Remove the overlay when selection changes $('#my_select').change(function() { if ($(this).prop("selectedIndex") != -1) { $('#default_message_overlay').hide(); } }); }); 

I made jsfiddle to demonstrate . Tested with Firefox and IE8.

Answer 6

Try the following:

 <div class="selectSelection"> <select> <option>Do not display</option> <option>1</option> <option>1</option> </select> </div> 

In CSS:

 .selectSelection option:first-child{ display:none; } 

Answer 7

 <option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option> 

you can, of course, move the css to a css file if you want, and place the script to catch the esc button to disable the disconnected again. Unlike other similar answers, I put value="" , this is so, if you send the value of your selection list with a form, it will not contain "selected something". In asp.net mvc 5, sent as json, compiled with var obj = { prop:$('#ddl').val(),...}; and JSON.stringify(obj); , prop will be null.