Как в 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" возможно.

---

Вас может еще заинтересовать список тем : #HTML | #CSS | #SELECT |

---

Еще никто не прокомментировал! COMMENTS+   BBcode

🞨

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

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

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

Теги:
select placeholder html select placeholder select option placeholder css select placeholder select placeholder html