Как сделать чтобы placeholder был сверху поля ввода?

Question

[Артём Лукичев]

Мне надо сделать так чтобы атрибут значение атрибута placeholder было не по середине как по дефолту в google chrome ,а в левом верхнем углу инпута прикрепил скриншот как это должно выглядеть. Искал в инете ничего не нашёл .ПОМОГИТЕ

Comments

[Рома Зварич]

Выложите на https://codepen.io/pen/ свой фрагмент кода, чтобы посмотреть, как у Вас получается и на Вашем примере попробовать найти решение

[Артём Лукичев]

Рома Зварич, проблему уже решил и у меня не получилось код туда закинуть я его поменял когда нашлось решение

Answer 1

[Rustam Bainazarov]

Нечто типа этого, зачем тут что-то скрывать?


Или так, для доступности, с label:


Нужна анимация? JS в помощь для надёжности. Можно написать обработчики полей и анимацию кастомного placeholder на смене классов, а можно использовать плагин для автоматической генерации оных:
https://speckyboy.com/floating-form-label-plugins/

В будущем можно будет это всё делать с помощью только CSS. Но пока что не используйте CSS-метод а-ля этого, ибо не все браузеры нормально не работают с этим input:placeholder-shown. Или вообще не работают. Ну а так, через пару лет можно везде спокойно использовать CSS, чтобы делать так:

Answer 2

[азаза]

так по дефолту он и должен занимать левый верхний угол
хоть бы скрин приложили где он по середине

Comments

[Rustam Bainazarov]

С какого перепуга он по-умолчанию слева наверху? :))


Он там никогда не был.

Артем фамилия, чтобы достичь этого эффекта, вам нужно создать вручную отдельный элемент (span, div, label) с вашем текстом и абсолютно позиционировать его поверх input'а внутри общего родительского контейнера.

Если будете использовать именно тег label, убедитесь, что он вам не нужен в качестве именно label.

[азаза]

Рустам Байназаров, если задать высоту полю
он никак не будет по середине

[Артём Лукичев]

Рустам Байназаров, но как сделать так чтобы он при фокусе на инпуте скрывался?

[Rustam Bainazarov]

natojezlo, да? Ну вот задал:

[азаза]

Рустам Байназаров, мдя. наверное перепутал с textarea

[Артём Лукичев]

natojezlo, я задал высоту полю но у меня всё равно всё выглядит вот так:

[Rustam Bainazarov]

Артем фамилия, а зачем он должен в вашем случае скрываться, когда он не мешает вводу текста?

Ну а так, если нужна анимация и т. п., то пока на CSS нельзя пользоваться одним свойством, которое проверяет наличие заполненности поля, оно экспериментальное. Ваш выход JS.

Опять же, я не знаю, зачем вам это в вашем случае.

[азаза]

Артем фамилия, наверное вот
https://html5.by/blog/placeholder/

[Rustam Bainazarov]

Артем фамилия, короче, типа того, зачем тут что-то скрывать?


Или так, для доступности, с label:


Нужна анимация? JS в помощь:
https://speckyboy.com/floating-form-label-plugins/

Пока что не используйте CSS-метод а-ля этого, ибо не все браузеры нормально не работают с этим input:placeholder-shown. Или вообще не работают. Ну а так, через пару лет можно везде спокойно использовать CSS, чтобы делать так:

[Артём Лукичев]

Рустам Байназаров, Большое спасибо за ваш ответ если хотите получить ещё одно решение себе в профиль напишите его не в виде комментария я отмечу как решение ещё раз большое спасибо!!!

[Rustam Bainazarov]

Артем фамилия, спасибо :))

Answer 3

[jeruthadam]

Плохая идея стилизовать шадоу дом, используй лейбл или обычный див, если надо что-то больше, чем просто смена цвета и размера шрифта.