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

Question

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

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

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

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

Answer 1

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

textarea 
{ 
    resize: none; 
} 

или просто

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

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

Answer 2

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

Answer 3

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