CSS → Плавающие лейблы на CSS (float label)

Разметка:

<div class="float-label">
  <label class="float-label__label" for="input">Label</label>
  <input class="float-label__input" type="text" id="input" placeholder="" />
</div>

Важные замечание — во первых, лейбл должен быть перед полем, иначе придётся изменять селекторы; во вторых, у поля обязательно должен присутствовать атрибут placeholder, хотя бы пустой.

SCSS:

.float-label {
  position: relative;
  
  // Default state
  &__label {
    position: absolute;
    top: 7px;
    left: 10px;
    font-weight: normal;
    color: #757575;
    pointer-events: none;
    transition: all 0.2s;
  }
  &__input::placeholder {
    opacity: 0;
    transition: all 0.2s;
  }
  
  // Move label
  &__label:has(+ &__input:focus),                    // at focused input
  &__label:has(+ &__input:not(:placeholder-shown)) { // at filled input
    top: -9px;
    padding: 0 3px;
    font-size: 12px;
    color: black;
    background: white;
  }
  
  // Show placeholder at focused input
  &__label + &__input:focus::placeholder {
    opacity: 1;
  }
}

Демо
Интеграция в Drupal