Você pode ter encontrado o atributo contenteditable. É usado em muitos lugares. É uma alternativa muito melhor para algo como uma área de texto. Você pode adicionar contenteditable="true" a qualquer div e então ele agirá como um campo de entrada. Neste artigo, mostrarei como adicionar espaço reservado ao texto, pois ele não oferece suporte ao atributo espaço reservado imediatamente.

O código necessário

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: "";
  }
}

Esse é todo o código que você precisa! No entanto, se você apenas adicionar isso ao CSS, não funcionará. Você precisa adicionar um atributo de espaço reservado ao seu HTML e também garantir que o div esteja visível.

Código completo/exemplo

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: "";
  }
}

Isso é tudo. Espero que seja útil!