Como desabilitar a propriedade redimensionável de uma área de texto?

63

Se você é um desses que quer desativar a propriedade redimensionável de um textarea utilizando CSS está no lugar certo.

Normalmente, podemos redimensionar um textarea clicando no canto inferior direito do mouse no textarea e arrastando o mouse. Conforme a imagem abaixo:

A seguinte regra CSS desabilita o comportamento de redimensionamento do elemento textarea:

textarea {
  resize: none;
}

Para desativá-lo para alguns (mas não todos) os textarea, existem algumas opções .

Para desativar um específico textarea com o name atributo definido como foo (ou seja, <textarea name="foo"></textarea>):

textarea[name=foo] {
  resize: none;
}

Ou, usando um id atributo (ou seja <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

página W3C lista os valores possíveis para restrições de redimensionamento: nenhum, ambos, horizontal, vertical e herdado:

textarea {
  resize: vertical; /* o usuário pode redimensionar verticalmente, mas a largura é fixa */
}

É super importante saber: resize não faz nada, a menos que a overflow propriedade esteja definida como algo diferente de visible, que é seu valor inicial para a maioria dos elementos.

Também vale a pena saber que o Firefox permitirá redimensionar um elemento menor que o tamanho original. Os navegadores Webkit não permitem redimensionar um elemento para torná-lo menor, apenas maior (em ambas as dimensões).

# Valores

  • none: o elemento não é redimensionável. Este é o valor inicial para a maioria dos elementos. O textarea elemento é a exceção mais comum – em muitos navegadores, seu resize valor padrão é both.
  • both: o usuário pode redimensionar a altura e / ou a largura do elemento.
  • horizontal: o usuário pode redimensionar o elemento horizontalmente (aumentando a largura).
  • vertical: o usuário pode redimensionar o elemento verticalmente (aumentando a altura).
  • inherit: o elemento herda o valor de redimensionamento de seu pai.

Quando um elemento é redimensionável, ele possui um pequeno identificador de interface do usuário no canto inferior. O identificador aparece à direita nos elementos da página quando a página direction está definida como ltr (da esquerda para a direita) e à esquerda nas rtl páginas (da direita para a esquerda).

Um elemento sem a alça (frente) e com a alça (traseira)

Suporte ao navegador

Os dados de suporte deste navegador, que possuem mais detalhes. Um número indica que o navegador suporta o recurso nessa versão e acima.

Computadores Desktop

Chrome Opera Firefox IE Edge Safari
4154 *Não764

Celular / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
Não46.Não767868
1
·

Artigos relacionados & Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *