CSS HTML

HTML: Como desabilitar o resize da textarea

4 de maio de 2020

HTML: Como desabilitar o resize da textarea

Neste artigo vamos aprender como desabilitar o resize da textarea, ou seja, impossibilitar o usuário de modificar o tamanho deste input com uma linha de CSS.

como remover o resize da textarea capa

Fala programador(a), beleza? Bora aprender coisa nova!

Então vamos lá!

A ideia de limitar o resize de uma textarea é, na maioria das vezes, para não quebrar o layout

Porém retirar uma possibilidade do cliente de uma ação que é comum é ruim, devemos pensar bem nesta questão

Dito isso, utilizamos a propriedade do CSS resize com o valor none

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Isso fará com que aquele símbolo de modificar o tamanho suma, vamos ver no código?

<!DOCTYPE html>
<html>
<head>
    <title>Como desabilitar o resize da textarea</title>
</head>
<body>
    <form>
        <div>
            <textarea id="texto_longo" placeholder="Sua mensagem aqui"></textarea>
        </div>
    </form>
</body>
</html>

Teremos o seguinte resultado com este HTML no navegador:

textarea ex 1

E agora adicionando a propriedade ao CSS:

#texto_longo {
    resize: none;
}

Veja o que acontece:

textarea ex 2

Perceba que o símbolo de modificação de tamanho sumiu, ele ficava no canto inferir direito, compare as imagens

Aí agora cabe a nós desenvolvedores alterar a largura e altura da textarea para o que o projeto pede

E não precisamos mais nos preocupar com esta ação de resize do cliente

Pronto! Aprendemos como desabilitar o resize da textarea, agora podemos aplicar aos nossos projetos 😀

Conclusão

Neste artigo vimos a possibilidade de remover o resize de uma textarea

Para isso utilizamos a propriedade resize com o valor none

O que modifica o elemento e a deixa impossibilitada de ser alterada pelo cliente

Mas nós podemos mudar sua width e height livremente

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x