Как убрать пустой тег Option в Select

В данной мини туториале, для начинающих изучать веб-разработку, описывается то, как сделать меню выбора (тег Select) пустым по умолчанию и скрыть пустой тег Option в меню выбора опций.

Если вам необходимо создать выпадающий список (тег select), у которого по умолчанию не выбрано ничего, то вам достаточно создать тег option и прописать ему атрибуты html selected disabled.

<option selected disabled></option>

Отображение выпадающего списка без пустого тега option (Australia выбрана по умолчанию)

Отображение выпадающего списка c пустым тегом option, без атрибута hidden

Если вы хотите, чтобы в вариантах выбора пустой option не было видно, самым оптимальным вариантом будет дописать тегу атрибут hidden.

<option selected disabled hidden></option>

Отображение выпадающего списка c пустым тегом option, с атрибутом hidden

Существует также способ скрытия пустого тега option в вариантах выбора с помощью css, для этого пропишите тегу option в стилях display:none;.

Отображение выпадающего списка без атрибута hidden и без display: none;

Отображение выпадающего списка без атрибута hidden и с display: none;

Код на Codeopen.

Если у вас остались вопросы, критика или комментарии — обязательно напишите мне, я с радостью отвечу вам.

А сейчас я прощаюсь и желаю вам хорошего дня!

Денис