Como desativar o redimensionamento de áreas de texto?

João E. -

Problema: Redimensionamento Indesejado da Área de Texto

As áreas de texto em formulários HTML geralmente têm um recurso padrão de redimensionamento. Isso pode afetar o layout e o design de uma página web, especialmente quando você precisa controlar a aparência do formulário.

Desabilitando o Redimensionamento de Textarea com CSS

Usando a Propriedade Resize

A propriedade CSS resize controla se um elemento pode ser redimensionado pelo usuário. Para textareas, você pode usar essa propriedade para desabilitar o comportamento padrão de redimensionamento.

Para desabilitar o redimensionamento, use este CSS:

textarea {
  resize: none;
}

Esta regra CSS define a propriedade resize como none, o que impede qualquer redimensionamento do textarea.

Dica: Manter Layout Consistente

Desabilitar o redimensionamento do textarea ajuda a manter um layout consistente em sua página, evitando que os usuários alterem acidentalmente o design.

Aplicando a Propriedade Resize a Todos os Textareas

Para desabilitar o redimensionamento de todos os textareas em uma página, aplique a regra CSS globalmente:

textarea {
  resize: none;
}

Esta regra atinge todos os elementos <textarea> e desabilita seu redimensionamento.

Direcionando Textareas Específicos

Para maior controle, você pode desabilitar o redimensionamento de textareas específicos:

  • Usando uma classe:

    .no-resize {
resize: none;
}

    Aplique isso a um textarea com: <textarea class="no-resize"></textarea>

  • Usando um ID:

    #comment-box {
resize: none;
}

    Aplique isso a um textarea com: <textarea id="comment-box"></textarea>

  • Usando um atributo name:

    textarea[name="message"] {
resize: none;
}

    Aplique isso a um textarea com: <textarea name="message"></textarea>

Opções Alternativas de Redimensionamento

Redimensionamento Apenas Vertical

Você pode permitir que os usuários redimensionem uma área de texto verticalmente mantendo sua largura fixa. Isso é útil quando você quer dar aos usuários algum controle sobre o tamanho da área de texto sem alterar o layout da sua página. Para habilitar o redimensionamento apenas vertical, use este CSS:

textarea {
  resize: vertical;
}

Esta regra permite que a área de texto seja redimensionada verticalmente, mantendo sua largura igual.

Dica: Evite Redimensionamento Excessivo

Para limitar o intervalo de redimensionamento vertical, você pode usar as propriedades min-height e max-height:

textarea {
  resize: vertical;
  min-height: 100px;
  max-height: 300px;
}

Isso garante que a área de texto não fique muito pequena ou muito grande.

Redimensionamento Apenas Horizontal

Às vezes, você pode querer permitir o redimensionamento horizontal mantendo a altura fixa. Isso pode ajudar com entradas que possam ter linhas longas de texto. Para habilitar o redimensionamento apenas horizontal, use este CSS:

textarea {
  resize: horizontal;
}

Esta regra permite que a área de texto seja redimensionada horizontalmente, mantendo sua altura igual.

Para que essas opções de redimensionamento funcionem, você precisa definir a propriedade overflow para algo diferente de visible. Por exemplo:

textarea {
  resize: vertical;
  overflow: auto;
}

Esta combinação permite o redimensionamento vertical e adiciona barras de rolagem quando o conteúdo é maior que o tamanho da área de texto.