Sc0undRel
@Sc0undRel

Как сделать заголовок для INPUT сверху?

Подскажите, пожалуйста, как сделать вот такой заголовок для инпута?

5c1e06db877bc469235874.png
  • Вопрос задан
  • 110 просмотров
Решения вопроса 1
nikolayshabalin
@nikolayshabalin
Выращиваю картошку в "МинскАгрПром"
Не используйте fieldset для оформления, вы убиваете семантику элемента. Fieldset предназначен для группировки инпутов по смыслу, то есть если у нескольких инпутов одна смысловая нагрузка, например инпуты для ввода данных кредитной карточки, то есть смысл их оборачивать в fieldset в ином случае это противозаконно.

Ничего не стоит сделать это с помощью CSS
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@DanKud
<form>
    <fieldset>
        <legend>Телефон или адрес эл. почты</legend>
        <input style="border: none; width: 100%" type="text" name="name">
    </fieldset>
</form>
Ответ написан
@inkShio
Лови, твой вариант по такому же принципу делается.
Ответ написан
@mcrack25
Вообще я так не верстал, но у меня на ум приходит 2 варианта:
1) можно сделать общий блок, ему задать:
border: 1px solid #000;
position: relative;

Внутри создать блок с текстом и задать следующие стили:
background: #fff;
display:inline-block;
position:absolute;
top:-10px;
left: 10px;

2) так-же сделать блок-обёртку, со следующими стилями:
border: 1px solid #000;
border-top:none;
position:relative;
overflow:hidden;

Текст так-же внутри блока, но ему дать такие свойства:
position:relative:
top:-10px;

И у него создать 2 псевдокласса линиями слева и справа.

Первый вариант подойдёт если фон просто одного цвета, а второй если нужна именно прозрачность
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы