Tratando o Redimensionamento de Textarea nos Navegadores Webkit e Firefox 4

Olá a todos, hoje veremos uma pequena solução para o comportamento do elemento <textarea> nos navegadores Webkit (Google Chrome e Safari) e no novo Firefox 4, a permissão de livre redimensionamento do campo pelo usuário, onde muitas vezes tal liberdade interfere no visual da interface.

Padrão do campo textarea nos navegadores webkit e firefox 4

Imagem da interface padrão do campo textarea nos navegadores Webkit e Firefox 4

A solução para esse impasse seria bloquear essa liberdade que o usuário possui, porém o termo “bloquear” é muito agressivo e não se encaixa aos conceitos da web moderna, por isso acho interessante não bloquearmos essa funcionalidade, mas sim a limitarmos parcialmente mantendo essa característica, mas de uma forma que não interfira no bom trabalho de sua interface. Assim sendo ao invés de bloquearmos, vamos limitar esse redimensionamento definindo, com CSS, os mínimos e máximos valores para a altura e comprimento do campo, ou seja, até onde seu usuário poderá redimensionar o campo.

                    	
                    	.contato label textarea{max-height:270px; min-height:170px; max-width:328px; min-width:328px;}
                    

No exemplo definimos a estrutura de nosso campo Textarea e com CSS definimos os limites máximo e mínimo para a autura e largura respectivamente. E pronto, agora é só conferir o resultado.

Para fazer o download do exemplo, clique aqui.

Espero que tenham gostado do tutorial, um abraço e até a próxima.

voltar