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

97

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.)

safari webkit css david.mchonechase
fonte

Respostas:

177

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

Tamas Czinege
fonte
22
Não é estritamente relevante aqui, mas o Safari também respeita as propriedades CSS min-height, max-height, min-width e max-width para deixar o redimensionamento habilitado, mas impõe limites sobre o quanto ele pode redimensionar.
stevemegson
1
Obrigado! Estava prestes a fazer a mesma pergunta :)
alex
E se eu quiser mostrá-lo ao passar o mouse após definir o redimensionamento: nenhum?
Michael Forrest
@Michael Forrest: você tentou textarea: hover {resize: inherit! Important; }? Nunca tentei, só um palpite.
Tamas Czinege
7
Uma advertência: não permitir que o usuário redimensione o <textarea>pode ser um problema de usabilidade. A configuração resize:vertical;costuma ser a melhor opção. Isso não deve atrapalhar o layout e dá ao usuário uma maior sensação de controle.
Web_Designer
2

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.

Gaurang P
fonte