Как установить невыбираемое описание по умолчанию в меню выбора (раскрывающегося списка) в HTML?

Ответ 1

Если ни один из параметров в выбранном не имеет selected атрибута, будет выбран первый вариант.

Чтобы выбрать параметр по умолчанию, который не является первым, добавьте selected атрибут к этому параметру:

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

Вы можете прочитать спецификацию HTML 4.01 по умолчанию в элементе select.

Я предлагаю прочитать хорошую книгу по HTML, если вам нужно изучить основы HTML, как это - я рекомендую Head First HTML.

Ответ 2

На основе ответа Oded вы также можете установить параметр по умолчанию, но не сделать его доступным, если это просто фиктивный текст. Например, вы можете сделать:

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

Это покажет "Выбрать язык" до того, как пользователь нажмет на поле выбора, но пользователь не сможет выбрать его из-за отключенного атрибута.

Ответ 3

.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>

Ответ 4

Просто сделайте выбор # 1 Выберите язык:

Live Demo

Ответ 5

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

Оставляя отключенный флаг, запрещает им не выбирать параметр, а скрытый флаг удаляет его из списка. В моем случае я использовал его также с списком перечислений, и концепция придерживается того же

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

Ответ 6

Поместите ваш запрос в 1-й option и отключите его:

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

Первый вариант будет автоматически выбранным по умолчанию (то, что вы видите первым, когда смотрите на выпадающий список), но добавление selected атрибута более понятно и действительно необходимо, когда первое поле является отключенным полем.

Атрибут disabled сделает эту опцию невыбираемой/серой.

Другие ответы предполагают установку disabled="disabled" но это необходимо, только если вам нужно проанализировать как XHTML, который в основном является более строгой версией HTML. disabled его на достаточно для стандартного HTML.

Если вы хотите сделать выбор "обязательным" (не принимая опцию "Выбрать язык" в качестве принятого ответа):

Добавьте required атрибут для selection и установки первого option value в пустую строку "".

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

Ответ 7

Хотя этот вопрос имеет приемлемый ответ, но я думаю, что это гораздо более чистый способ достижения желаемого результата

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

Необходимый атрибут делает его обязательным для выбора опции из списка.

value = "" внутри тега option в сочетании с обязательным атрибутом в теге select делает выбор опции " Select " недопустимым, тем самым достигая требуемого результата