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

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

Однако в Safari в нижнем правом углу есть инструмент "handle", который позволяет пользователю изменять размер текстового поля, нажимая и перетаскивая его. Я также заметил эту проблему с textarea на странице stackoverflow Ask a Question. Этот инструмент запутан и в основном мешает.

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

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

Ответ 1

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

textarea
{
   resize: none;
}

или просто просто

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

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

Ответ 2

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

textarea {
    resize: none;
}

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

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

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

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

#foo {
    resize: none;
}

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

Ответ 3

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