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

Question

StormyVortex

css

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

Как поместить placeholder в верхний угол, используя CSS, чтобы он не располагался по середине по вертикальной линии, как в этом примере: https://codepen.io/scrappyjs666/pen/mdvgZJv?

13 декабря 2023 г. 8:57

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для расположения элемента input в начале, сверху по вертикальной оси можно использовать CSS свойство "align-self" с значением "flex-start". Например:

```css
input {
  align-self: flex-start;
}
```

Чтобы поместить placeholder в верхний угол, можно использовать CSS позиционирование и относительное позиционирование элемента-контейнера. Например:

```css
.container {
  position: relative;
}

input {
  position: absolute;
  top: 0;
}

input::placeholder {
  position: absolute;
  top: 0;
}
```

В данном примере, элемент-контейнер имеет относительное позиционирование, а сам input и его placeholder имеют абсолютное позиционирование с верхней границей контейнера (top: 0).

Answer 2

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