Скрытие маркера изменения размера текстового поля в Safari

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

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

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

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

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

textarea
{
   resize: none;
}

или просто

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

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

Используйте следующее правило 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элементам управления.

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