Скрытие ручки изменения размера текста в Safari

Question

Я использую компоненты textarea в своем приложении и динамически контролирую их высоту. По мере того, как пользователь вводит текст, высота увеличивается всякий раз, когда появляется достаточно текста. Это прекрасно работает на IE, Firefox и Safari.

Однако в Safari в правом нижнем углу есть инструмент «ручка», который позволяет пользователю изменять размер текстовой области, щелкая и перетаскивая. Я также заметил эту проблему с textarea на странице stackoverflow Задать вопрос. Этот инструмент сбивает с толку и в основном мешает.

Итак, есть ли способ скрыть эту ручку изменения размера?

(Я не уверен, что слово «ручка» - правильное слово, но я не могу придумать лучшего термина.)

Answer 1

Вы можете переопределить поведение изменения размера с помощью CSS:

textarea
{
   resize: none;
}

или просто

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

Допустимые свойства: оба, горизонтальный, вертикальный, нет

Answer 2

Используйте следующее правило CSS, чтобы отключить это поведение для всех TextArea элементов:

textarea {
    resize: none;
}

Если вы хотите отключить его для некоторых (но не для всех) TextArea элементов, у вас есть несколько вариантов (спасибо этой странице ).

Чтобы отключить определенный TextArea с атрибутом name, установленным в foo (то есть <TextArea name="foo"></TextArea>):

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

Или с использованием идентификатора (т. Е. <TextArea id="foo"></TextArea>):

#foo {
    resize: none;
}

Обратите внимание, что это относится только к браузерам на основе WebKit (например, Safari и Chrome), которые добавляют дескриптор изменения размера к элементам управления TextArea.

Answer 3

возможность max-height safari max-width также работает в Firefox 4.0 (b3pre). Хороший пример здесь кстати: http://www.alanedwardes.com/posts/safari-and-resizable-textboxes/