Default text which won't be shown in drop-down list

Question

Kyle's solution worked perfectly fine for me so I made my research in order to avoid any Js and CSS, but just sticking with HTML. Adding a value of selected to the item we want to appear as a header forces it to show in the first place as a placeholder. Something like:

<option selected disabled>Choose here</option>

The complete markup should be along these lines:

<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's the result:

If you do not want the sort of placeholder text to appear listed in the options once a user clicks on the select box just add the hidden attribute like so:

<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 the fiddle here and the screenshot below.

Here is the solution:

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

The proper and semantic way is using a placeholder label option:

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

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

If a select element contains a placeholder label option, the user agent is expected to render that option in a manner that conveys that it is a label, rather than a valid option of the control.

However, most browsers will render it as a normal option. So we will have to do fix it manually, by adding the following to the option:

• The selected attribute, to make it selected by default
• The disabled attribute, to make it non-selectable by 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>

Because you can't use assign placeholders for select tags, I don't believe that there is any way to do exactly what you're asking for with pure HTML/CSS. You can, however, do something like this:

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

"Select language" will show up in the dropdown, but once another option is selected it will not be possible to reselect it.

I hope that helps.

Try this:

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

In the CSS:

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