Как расположить input в начале, по вертикальной оси?
Всем привет, подскажите пожалуйста, хочу расположить placeholder в верхнем углу
вот так https://codepen.io/scrappyjs666/pen/oNmOrby
есть вообще вариант сделать это при помощи css?
а то он располагается по середине по вертикальной линии
https://codepen.io/scrappyjs666/pen/mdvgZJv
Заранее благодарсвтую!
Дополнительно:
Не понятно чего вы хотите добиться... вы про placeholder?
Можно сделать собственный плейсхолдер отдельным элементом и стилизовать как угодно.
А его вы можете спозиционировать (гридами или абсолютом) куда угодно.
Ответы:
Один из способов - добавить тег label и его спозиционировать.
Я бы лучше обернул input в div или label и дал бы ему псевдоэлемент, который также можно спозиционировать и стилизовать. А содержимое псевдоэлемента можно задать через атрибут родителя, тогда можно с помощью JS его динамически менять, если понадобится.
https://codepen.io/stanislaff/pen/YzBbwGP
Есть еще вот такой вариант, если подходит
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы расположить элемент input в начале по вертикальной оси, можно использовать CSS свойство display с значением flex для контейнера, в котором находится input. Это позволит легко управлять расположением элементов внутри контейнера.
Пример кода на PHP с использованием CSS flexbox:
<div style="flex-direction: column"> <button>Отправить</button> </div>
В данном примере элемент input будет расположен в начале по вертикальной оси, а за ним будет следовать кнопка "Отправить". Свойство flex-direction: column указывает, что элементы внутри контейнера будут располагаться вертикально.
Если нужно дополнительно настроить отступы или выравнивание элементов, можно использовать другие CSS свойства, такие как justify-content, align-items и другие.
Надеюсь, данное решение поможет вам расположить элемент input в начале по вертикальной оси на вашем веб-сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.