Как сделать label над input css
4 года назад
Человек-Молекула
Для формированию подписи к текстовому полю ввода input обычно используется тэг label. Рассмотрим вариант в котором подпись поля смещена на границу. Пример на фото:
Исходный 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
Позиционирование в CSS
Получите навык работы с CSS и адаптивными интерфейсами
от 3 900 ₽
Посмотреть →
Профессиональная верстка
Адаптивная вёрстка для отображения на любых устройствах
SASS
Освоите препроцессор SASS и стилизацию веб-приложений
Фронтенд-разработчик
Изучите HTML, CSS, JavaScript и React
от 6 792 ₽
Анимация CSS
Освоите CSS-анимации для улучшения UX
Полный список доступных курсов по разным направлениям
Похожие вопросы
Курсы по веб-разработке