Как бы вы сверстали такой input?

Question

[tarthur]

Всем привет.
Собственно к вопросу:
i.imgur.com/04eVghQ.jpg?1

Как я это собираюсь делать:

<fieldset>
  <legend>Email Address (Case Sensitive)</legend>
  <input type="text">
</fieldset>
...

И CSS стили для всего этого.

Но, может быть, есть какие-то более адекватные решения?

Answer 1

[Андрей Павленко]

https://jsfiddle.net/ghp4gscq/3/
мне показалось, что это будет более адекватное решение. Сразу скажу, это только начальный шаблон. Дальше уже делайте сами.
Я бы, конечно, еще сделал внешний контейнер для формы стекстом, вместо div с классом label сделал label тэг, изменять цвет активного/неактивного лейбла, ну и еще много мелких оптимизаций. Но показал, с чего можно начать.

Comments

[tarthur]

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

[Андрей Павленко]

tarthur: думаю, тут либо какие-то уж очень умные селекторы, или придется подключать CSS. С другой стороны, с fieldset вы этого не добъетесь. Я просто скинул вам пример более адекватной верстки (хотя и не идеальной)

Answer 2

[tarthur]

codepen.io/tarthur/pen/yONYJa