Как сделать label над input css

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Для формированию подписи к текстовому полю ввода input обычно используется тэг label. Рассмотрим вариант в котором подпись поля смещена на границу. Пример на фото: enter image description here

Исходный HTML файл:

<div class="input-box">
  <label>label name</label>
  <input type="text">
</div>

Стили

.input-box {
  /* родительский блок относительно которого будем формировать положение
  тега label */
  position: relative;
}

input {
  background: #fff;
  padding: 10px;
  /* закруглим края у поля ввода */
  border-radius: 11px;
  width: 200px;
}

label {
  position: absolute;
  /* смещение относительно родительского элемента 10px вверх от верхнего края и   10px влево */
  top: -10px;
  left: 10px;
  background: #fff;
  padding: 0 5px;
}

3 года назад

Вячеслав Межуревский

strong text

2 года назад

Md ismail Hossain

1 месяц

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

1 месяц

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

1 месяц

Анимация CSS

Навык создания анимаций в CSS для улучшения пользовательского опыта и повышения востребованности на рынке

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