Não é uma resposta super sofisticada, mas é algo que pode te ajudar de maneira bem simples, sem JS ou regex.
Eu fiz um box, imitando que é um textarea
e a frase na verdade fica fora do textarea
. Só tenha em mente que vc tem que fazer alguns ajustes de acessibilidade colocando role="textbox"
na div para ela semanticamente fica mais coerente, o taxtarea continua sendo acessível pelo tab o que é bom, mas eu tive que "transferir" o outline
do :focus
da textarea
para a div
, para isso usei o css :focus-within
, assim quando vc clica no textarea
dentro do box, o box que vai receber o outline

Lembre de deixar tudo acessível com role
e aria
na div
, e for
na label
que tem o texto do textarea
!
Segue o código da imagem acima
.box {
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
box-sizing: border-box;
border: 1px solid #ccc;
padding: 0.2em;
width: 600px;
height: 200px;
}
.box:focus-within {
box-shadow: 0px 0px 0px 2px cornflowerblue;
}
.box label {
margin: 0;
padding: 0;
width: 100%;
}
.box textarea {
resize: none;
outline: none;
padding: 0;
margin: 0;
border: none;
width: 100%;
height: 170px;
}
<div class="box" role="textbox" aria-labelledby="listaProdutos">
<label for="lista" id="listaProdutos">Estimado Familiar, pedimos que traga para o utente o seguinte produto: </label>
<textarea name="" id="lista" ></textarea>
</div>