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

Question

[Влад]

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

Answer 1

[Николай Шабалин]

Не используйте fieldset для оформления, вы убиваете семантику элемента. Fieldset предназначен для группировки инпутов по смыслу, то есть если у нескольких инпутов одна смысловая нагрузка, например инпуты для ввода данных кредитной карточки, то есть смысл их оборачивать в fieldset в ином случае это противозаконно.

Ничего не стоит сделать это с помощью CSS

Answer 2

[DanKud]

<form>
    <fieldset>
        <legend>Телефон или адрес эл. почты</legend>
        <input style="border: none; width: 100%" type="text" name="name">
    </fieldset>
</form>

Answer 3

[inkShio]

Лови, твой вариант по такому же принципу делается.

Answer 4

[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 псевдокласса линиями слева и справа.

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