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

Question

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

Однако в Safari в правом нижнем углу есть инструмент «ручка», который позволяет пользователю изменять размер текстовой области, щелкая и перетаскивая ее.Я также заметил эту проблему с текстовой областью на странице 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 max-width для Safari также работает в Firefox 4.0 (b3pre).кстати, хороший пример: http://www.alanedwardes.com/posts/safari-and-resizable-textboxes/