Возможно, вы встречали атрибут contenteditable. Он используется во многих местах. Это гораздо лучшая альтернатива чему-то вроде текстовой области. Вы можете добавить contenteditable="true" к любому элементу div, и тогда он будет действовать как поле ввода. В этой статье я покажу вам, как добавить заполнитель к тексту, поскольку он не поддерживает атрибут заполнителя прямо из коробки.

Код нужен

div[contenteditable] {
  &[placeholder]:empty::before {
    content: attr(placeholder);
    z-index: 9;
    line-height: 1.7;
    color: #555;
    word-break: break-all;
    user-select: none;
  }

  &[placeholder]:empty:focus::before {
    content: "";
  }
}

Это весь код, который вам нужен! Однако, если вы добавите это только в CSS, это не сработает. Вам необходимо добавить атрибут заполнителя в ваш HTML, а также убедиться, что элемент div виден.

Полный код/пример

HTML

CSS

div[contenteditable] {
  /* Basic styles */
  width: 20rem;
  height: 15rem;
  padding: 1rem;
  background: #292929;
  color: #fff;

  /* Placeholder code */
  &[placeholder]:empty::before {
    content: attr(placeholder);
    z-index: 9;
    line-height: 1.7;
    color: #555;
    word-break: break-all;
    user-select: none;
  }

  &[placeholder]:empty:focus::before {
    content: "";
  }
}

Вот и все. Надеюсь, вы найдете ее полезной!