Как расположить input в начале, по вертикальной оси?

Question

[sw213]

Всем привет, подскажите пожалуйста, хочу расположить placeholder в верхнем углу
вот так https://codepen.io/scrappyjs666/pen/oNmOrby
есть вообще вариант сделать это при помощи css?
а то он располагается по середине по вертикальной линии
https://codepen.io/scrappyjs666/pen/mdvgZJv
Заранее благодарсвтую!

Comments

[FeST1VaL]

Не понятно чего вы хотите добиться... вы про placeholder?

[sw213]

FeST1VaL, да, извиняюсь, описал плохо задачу

[Сергей delphinpro]

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

[Ankhena]

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

Answer 1

[Станислав Зиненко]

Один из способов - добавить тег label и его спозиционировать.

Я бы лучше обернул input в div или label и дал бы ему псевдоэлемент, который также можно спозиционировать и стилизовать. А содержимое псевдоэлемента можно задать через атрибут родителя, тогда можно с помощью JS его динамически менять, если понадобится.
https://codepen.io/stanislaff/pen/YzBbwGP
Есть еще вот такой вариант, если подходит