Ocultar a alça de redimensionamento da área de texto no Safari

Estou usando componentes textarea em meu aplicativo e controlo sua altura dinamicamente. Conforme o usuário digita, a altura é aumentada sempre que houver texto suficiente. Isso funciona bem no IE, Firefox e Safari.

No entanto, no Safari, há uma ferramenta de "alça" no canto inferior direito que permite ao usuário redimensionar a área de texto clicando e arrastando. Também notei esse problema com a área de texto na página Stackoverflow Faça uma Pergunta. Esta ferramenta é confusa e basicamente atrapalha.

Então, há como ocultar essa alça de redimensionamento?

(Não tenho certeza se "manipular" é a palavra certa, mas não consigo pensar em um termo melhor.)

Você pode substituir o comportamento de redimensionamento com CSS:

textarea
{
   resize: none;
}

ou simplesmente

<textarea style="resize: none;">TEXT TEXT TEXT</textarea>

As propriedades válidas são: both, horizontal, vertical, none

Use a seguinte regra CSS para desativar esse comportamento para todos os TextAreaelementos:

textarea {
    resize: none;
}

Se você deseja desativá-lo para alguns (mas não todos) TextAreaelementos, você tem algumas opções (graças a esta página ).

Para desativar um específico TextAreacom o nameatributo definido como foo(ou seja, <TextArea name="foo"></TextArea>):

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

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

#foo {
    resize: none;
}

Observe que isso só é relevante para navegadores baseados em WebKit (ou seja, Safari e Chrome), que adicionam a alça de redimensionamento aos TextAreacontroles.

a oportunidade safari max-height max-width também funciona no firefox 4.0 (b3pre). bom exemplo aqui, a propósito: http://www.alanedwardes.com/posts/safari-and-resizable-textboxes/