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

97

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

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

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

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

safari webkit css david.mchonechase
источник

Ответы:

177

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

textarea
{
   resize: none;
}

или просто

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

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

Тамаш Чинеге
источник
22
Здесь это не совсем актуально, но Safari также учитывает свойства CSS min-height, max-height, min-width и max-width, чтобы оставить изменение размера включенным, но наложить ограничения на то, насколько оно может изменяться.
stevemegson
1
Спасибо! Собирался задать этот же вопрос :)
Алекс
Что, если я хочу отображать его при наведении курсора после того, как установил размер: none?
Майкл Форрест,
@ Майкл Форрест: вы пробовали textarea: hover {resize: inherit! Important; }? Я никогда не пробовал, просто догадываюсь.
Tamas Czinege
7
Одно предостережение: запрет на изменение размера <textarea>вообще может быть проблемой для удобства использования. Настройка resize:vertical;часто бывает лучшим вариантом. Это не должно испортить ваш макет и дает пользователю большее чувство контроля.
Web_Designer
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элементам управления.

Gaurang P
источник