Как в select поставить placeholder

Поддержи проект!!!

placeholder select или визуальная подсказка в поле select, как сделать примеры, скачать

Placeholder для select

1. Placeholder для select - вариант 1.
2. Placeholder для select - вариант 2.
3. Скачать можно здесь

Скопировать ссылку

Placeholder для select - вариант 1.

Нам нужна простая реализация в коде Placeholder для select. Никаких диаметрально разных вариантов для Placeholder в select - не существует. Это всего лишь разновидность на тему, вариант №1:


Оборачиваем наш select в div:

<div class="select"></div>

В первом option прописываем атрибуты : "selected disabled hidden"

<option selected disabled hidden>Выберите</option>

И получаем результат:

Пример Placeholder для select - вариант 1.

1 2 3

Как видим, после выбора одного из option откатиться в нулевую позицию не получится. Для этого из первой строки удаляем "selected disabled hidden"

Пример Placeholder для select - вариант 1.1

Выберите 1 2 3
Скопировать ссылку

Placeholder для select - вариант 2.

Следующий вариант еще проще чем первый. А по результату аналогичен.

Опять оборачиваем наш select в div:

<div class="select"></div>

В первом option добавляем "style="display:none"".

value="" можно не ставить, поскольку после выбора "option" первый вариант не будет доступен.

<option value="" style="display:none"</option>

И получаем результат:

Пример Placeholder для select - вариант 2.

Выбрать вариант Значение 1 Значение 2

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

Давайте уберем style="display:none" :

Пример Placeholder для select - вариант 2.1.

Выбрать вариант Значение 1 Значение 2

В таком варианте, выбрать нулевую ячейку "option" возможно.

---

Комментариев : 2 COMMENTS+   BBcode

🞨

Загрузить свой аватар

(max ширина, высота = 200px)

Подписаться + =

11/03/2021 12:44 Serp ... Пожаловаться Скопировать ссылку

🞨

По умолчанию, текст при блокировке:

Комментарий заблокирован администратором сайта

Для изменения текста блокировки введите новый текст ниже:

Заблокировать

<details> <summary> c этими тож можно такие манипуляции делать ?

Ответить

11/03/2021 02:20 Марат Serp ... Пожаловаться Скопировать ссылку

🞨

По умолчанию, текст при блокировке:

Комментарий заблокирован администратором сайта

Для изменения текста блокировки введите новый текст ниже:

Заблокировать

Если о вложенности, то да.
Если вы о "selected disabled hidden", то...
Я эти теги никогда не использовал, поэтому, ничего сказать не могу...

Ответить Теги:
select placeholderhtml select placeholderselect option placeholdercss select placeholderselect placeholder htmlplaceholder html select