Как сделать label над input css
Ответы
Вячеслав Межуревский
11 октября 2022
Для формированию подписи к текстовому полю ввода 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;
}
0
0
Md ismail Hossain
02 декабря 2023
strong text
0
0