Es posible que hayas encontrado el atributo contenteditable. Se usa en muchos lugares. Es una alternativa mucho mejor a algo como un área de texto. Puede agregar contenteditable="true" a cualquier div y luego actúa como un campo de entrada. En este artículo, le mostraré cómo agregar un marcador de posición al texto, ya que no admite el atributo de marcador de posición desde el primer momento.

El código necesario

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

¡Ese es todo el código que necesitas! Sin embargo, si solo agrega eso al CSS, no funcionará. Debe agregar un atributo de marcador de posición a su HTML y también asegurarse de que el div sea visible.

Código completo/Ejemplo

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

Eso es todo al respecto. ¡Esperamos que te sea útil!