У кого-нибудь есть хорошая плавающая табличка?

Question

Некоторое время назад я заметил этот плавающий ярлык. Я искал похожий рабочий ярлык с тех пор.

Я пробовал пару, которая выглядела хорошо и, казалось, сначала отлично работалано у них, как оказалось, есть свои проблемы, например, им либо нужен обязательный атрибут, в противном случае они будут выглядеть как обычные метки, либо метка будет возвращаться вниз, когда тип ввода - электронная почта.

, поэтомуМне было интересно, есть ли у кого-нибудь хорошая замена, которую я могу использовать.

Answer 1

Я создаю быстрый фрагмент для вас. Вы можете настроить его соответственно. Надеюсь, это поможет.

С некоторыми переходами и позиционированием метки абсолютно, мы можем добиться этого эффекта.

Если у вас есть какие-либо вопросы, ударь меня;)

.input-wrapper {
  position: relative;
}

.input-wrapper .input {
  padding: 8px;

  border: 0;
  border-bottom: 1px solid #aaa;
  outline: 0;
  transition: all .15s ease-out;
}

.input-wrapper .input:hover {
  border-bottom-color: #444;
}

.input-wrapper .input:focus {
  border-bottom-color: #6200EE;
}

.input-wrapper .input:focus + .label,
.input-wrapper .input:valid + .label {
  top: -8px;
  left: 4px;
}

.input-wrapper .label {
  position: absolute;
  left: 8px;
  top: 10px;

  padding: 0 4px;
  background-color: #fff;

  font-size: 14px;
  line-height: 1;

  color: #444;

  transition: all .15s ease-out;
}

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

Answer 2

Материал имеет приятный плавающий ярлык. Вы можете проверить это здесь. https://material.io/components/text-fields/