Создайте вход Googlelike в CSS

Question

Мне нужно воссоздать input, как в Google Material Theme.

Вот чего я хочу достичь:

Я знаю, что фреймворки / библиотеки делают это, но это домашняя работа, и я должен сделатьэто полностью.

Вот мой фактический код:

input {
  margin-top: -6px;
  margin-bottom: 30px;
  border: solid 2px #00ffb3;
  border-radius: 3px;
  height: 30px;
}

label {
  margin-left: 8px;
  font-weight: lighter;
}

<div class="input">
  <label for="text">Message</label>
  <input class="Message" type="text">
</div>

Answer 1

Вам нужно будет абсолютно позиционировать свой ярлык:

.input {
  margin-top: 5px
}

input {
  margin-bottom: 30px;
  border: solid 2px #00ffb3;
  border-radius: 3px;
  height: 30px;
}

label {
  margin-left: 8px;
  font-weight: lighter;
  position: absolute;
  margin-top: -10px;
  background: #fff;
  padding: 0 5px;
}

<div class="input">
  <label for="text">Message</label>
  <input class="Message" type="text">
</div>

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

Answer 2

Эмпирический ответ дал: работает, и это как вы и просили. Однако вы можете, конечно, немного его настроить с помощью анимации:

.input-wrapper {
  position: relative;
}

.input-wrapper .input {
  padding: 8px 16px;
  border: 2px solid #6200EE;
  border-radius: 3px;
}

.input-wrapper .input:focus+.label {
  top: -5px;
  left: 8px;
}

.input-wrapper .label {
  position: absolute;
  left: 16px;
  top: 10px;
  padding: 0 4px;
  background-color: #fff;
  font-size: 14px;
  line-height: 1;
  color: #6200EE;
  transition: all .15s ease-out;
}

<div class="input-wrapper">
  <input class="input" type="text" id="username">
  <label class="label" for="username">Label</label>
</div>

Answer 3

Элемент <fieldset> обеспечивает похожий стиль, для того, чтобы получить то, что вам нужно, достаточно немного стилей для изменения цвета. В приведенном ниже примере я не использовал стиль ввода, но вы можете сделать это самостоятельно.

Пример:

fieldset {
  border: 2px solid lime;
  color: lime;
  border-radius: 5px;
}

<fieldset>
  <legend>Message:</legend>
  <input class="Message" type="text">
</fieldset>