позиция label при клике

Question

я сделал вот такое с помощью textarea и label.Как сделать так чтобы при нажатии на textarea label поднимался выше, и если в textarea ввели текст то нужно чтобы label не опускался.

Answer 1

Вариант только на CSS:

div {
  position: relative;
  margin-top: 30px
}

label {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transition: top 0.5s linear;
}

textarea:focus + label, textarea:valid + label {
  top: -20px;
}

<div>
  <textarea id="ta123" required></textarea>
  <label for="ta123">Лейбл</label>
</div>

Или если атрибут required мешает, то вот вариант с JS:

let textarea = document.querySelector('textarea');

textarea.addEventListener( 'input', ()=>{
  textarea.classList.toggle( 'has-text', !!textarea.value );
});

div {
  position: relative;
  margin-top: 30px
}

label {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transition: top 0.5s linear;
}

textarea:focus + label, textarea.has-text + label {
  top: -20px;
}

<div>
  <textarea id="ta123"></textarea>
  <label for="ta123">Лейбл</label>
</div>

БЛОГ НА HUSL

позиция label при клике

Ответы (1 шт):