Как отключить свойство изменения размера текстового поля?

Я хочу отключить свойство изменения размера textarea.

В настоящее время я могу изменить размер textarea, щелкнув в правом нижнем углу textarea и перетащив мышь. Как я могу это отключить?

Введите здесь описание изображения


html css
person user549757    schedule 08.03.2011    source источник
comment
@JDIsaaks - кроме того, разрешение изменения размера в определенных ситуациях может нарушить макет и печать (важный аспект текущего критически важного проекта).   -  person random_user_name    schedule 23.11.2012
comment
Иногда вам действительно нужно текстовое поле без изменения размера. Например, в этом случае, когда вы (условно) конвертируете текстовое поле во что-то, что просто выглядит как метка. Очень странно иметь этикетку со случайным плавающим граббером в стороне.   -  person neminem    schedule 21.01.2015
comment
Ради всего хорошего, пожалуйста, не делайте этого на реальном текстовом поле, иначе вы оттолкнете своих опытных пользователей. Нарушение основных функций браузера следует рассматривать как ядерный вариант.   -  person superluminary    schedule 30.01.2020

Ответы (16)


arrow_upward
3906
arrow_downward

Следующее правило CSS отключает изменение размера для элементов textarea:

textarea {
  resize: none;
}

Чтобы отключить его для некоторых (но не для всех) textareas, есть несколько параметров .

Вы можете использовать атрибут class в своем теге (<textarea class="textarea1">):

.textarea1 {
  resize: none;
}

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

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

Или, используя атрибут id (т. Е. <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

На странице W3C перечислены возможные значения ограничений изменения размера: нет, оба, по горизонтали, вертикальный и наследовать:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

Просмотрите достойную страницу совместимости, чтобы узнать, какие браузеры в настоящее время поддерживают эту функцию. Как прокомментировал Джон Халка, размеры можно дополнительно ограничить в CSS с помощью max-width, max-height, минимальная ширина и минимальная высота.

Очень важно знать:

Это свойство ничего не делает, если свойство переполнения не является видимым, что является значением по умолчанию для большинства элементов. Обычно, чтобы использовать это, вам нужно установить что-то вроде overflow: scroll;

Цитата Сары Коуп, http://css-tricks.com/almanac/properties/r/resize/

person Donut    schedule 08.03.2011
comment
Есть ли решение для Firefox, Opera и / или IE? - person Šime Vidas; 08.03.2011
comment
@ Šime IE и FF3 (и более ранние версии) не поддерживают изменение размера, поэтому решение для них не требуется. Для FF4 это решение должно работать. - person Donut; 08.03.2011
comment
согласно davidwalsh.name/textarea-resize - используйте resize: vertical или resize: horizontal, чтобы ограничить изменение размера одно измерение. Или используйте любую из max-width, max-height, min-width и min-height. - person Jon Hulka; 18.11.2012
comment
Я единственный, кому кажется странным устанавливать это с помощью css, а не атрибутов? Почему я не могу затем установить отключенные или проверенные или другие свойства с помощью CSS ... - person Buksy; 08.08.2016
comment
@Buksy Потому что disabled - это состояние, а не визуальное свойство. Таким образом, логично, что это не должно определяться языком стиля. - person Kroltan; 08.09.2016
comment
В этом решении нет лучших практик. Вы можете сделать это с помощью свойства MVC. @ Html.TextAreaFor (model = ›model.YourProperty, new {@style = width: 90%; height: 180px; resize: none;}) - person Carlos de Jesus Baez; 06.02.2020
comment
Большое вам спасибо, сэр. Ваше решение мне помогло. - person Dabananda Mitra; 17.05.2021

arrow_upward
226
arrow_downward

В CSS ...

textarea {
    resize: none;
}
person Jeff Parker    schedule 08.03.2011

arrow_upward
118
arrow_downward

Я обнаружил две вещи:

Первый

textarea{resize: none}

Это CSS 3, который еще не выпущен, совместимый с Firefox 4 (и более поздние версии), Chrome и Safari.

Еще одна функция форматирования - overflow: auto, чтобы избавиться от правой полосы прокрутки с учетом атрибут dir.

Код и разные браузеры

Базовый HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

Некоторые браузеры

  • Internet Explorer 8

Введите описание изображения здесь

  • Firefox 17.0.1

Введите описание изображения здесь

  • Хром

Введите описание изображения здесь

person Rami Jamleh    schedule 27.12.2012

arrow_upward
68
arrow_downward

В CSS 3 есть новое свойство для элементов пользовательского интерфейса, которое позволит вам это сделать. Это свойство является свойством изменения размера. Таким образом, вы должны добавить в свою таблицу стилей следующее, чтобы отключить изменение размера всех элементов textarea:

textarea { resize: none; }

Это свойство CSS 3; используйте диаграмму совместимости, чтобы увидеть совместимость браузера.

Лично меня очень раздражает отключение изменения размера элементов textarea. Это одна из тех ситуаций, когда дизайнер пытается «сломать» клиента пользователя. Если ваш дизайн не может вместить текстовое поле большего размера, вы можете пересмотреть, как работает ваш дизайн. Любой пользователь может добавить textarea { resize: both !important; } в свою таблицу стилей, чтобы изменить ваши предпочтения.

person James Sumners    schedule 08.03.2011
comment
Но это будет скорее пользователь, намеренно нарушающий макет, чем пользователь, которому просто нужно изменить размер своего texarea и в итоге что-то не работает. - person Redwolf Programs; 15.04.2019

arrow_upward
23
arrow_downward

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

textarea {
    max-width: /* desired fixed width */ px;
    min-width: /* desired fixed width */ px;
    min-height: /* desired fixed height */ px;
    max-height: /* desired fixed height */ px;
}
person yevgeniy    schedule 12.02.2015
comment
Также используйте resize:none с этим решением, чтобы ручка не появлялась в нижнем углу, что, к сожалению, не работает. - person MacroMan; 17.07.2015

arrow_upward
17
arrow_downward

Это легко сделать в HTML:

<textarea name="textinput" draggable="false"></textarea>

У меня это работает. Значение по умолчанию true для атрибута draggable.

person Thusitha Wickramasinghe    schedule 21.07.2015
comment
Это атрибут HTML 5, поэтому его поддерживают только новые браузеры. Я где-то читал, что IE поддерживает его с 9 и далее. - person Antony D'Andrea; 08.09.2015
comment
Это работает в большинстве браузеров. в каждом последнем браузере. - person Thusitha Wickramasinghe; 09.11.2015
comment
это не помешает изменению размера текстового поля - person Mishko Vladimir; 27.12.2016
comment
@ AntonyD'Andrea Это не работает в последней версии Chrome: jsfiddle.net/ps2v8df9 - person Advait Junnarkar; 20.02.2020

arrow_upward
9
arrow_downward

Вы просто используете: resize: none; в своем CSS.

Свойство resize указывает, может ли пользователь изменять размер элемента.

Примечание. Свойство resize применяется к элементам, для которых вычисленное значение переполнения отличается от "visible".

Кроме того, изменение размера в настоящее время не поддерживается в Internet Explorer.

Вот различные свойства для изменения размера:

Без изменения размера:

textarea {
  resize: none;
}

Измените размер в обоих направлениях (по вертикали и горизонтали).

textarea {
  resize: both;
}

Изменить размер по вертикали:

textarea {
  resize: vertical;
}

Изменить размер по горизонтали.

textarea {
  resize: horizontal;
}

Также, если у вас есть width и height в вашем CSS или HTML, это предотвратит изменение размера вашего текстового поля с более широкой поддержкой браузеров.

person Alireza    schedule 01.06.2017

arrow_upward
8
arrow_downward

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

resize: none;

  • Вы можете применить это как свойство встроенного стиля, например:

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

  • или между тегами <style>...</style> элементов, например:

    textarea {
    resize: none;
}
person Webeng    schedule 12.06.2016

arrow_upward
7
arrow_downward

Вы можете просто отключить свойство textarea следующим образом:

textarea {
    resize: none;
}

Чтобы отключить вертикальное или горизонтальное изменение размера, используйте

resize: vertical;

or

resize: horizontal;
person Community    schedule 28.05.2018

arrow_upward
5
arrow_downward

CSS 3 может решить эту проблему. К сожалению, в настоящее время он поддерживается только в 60% используемых браузеров.

Для Internet Explorer и iOS нельзя отключить изменение размера, но можно ограничить размер textarea, установив его width и height.

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

См. демонстрацию

person Oriol    schedule 30.10.2015

arrow_upward
4
arrow_downward

Я создал небольшую демонстрацию, чтобы показать, как работают свойства изменения размера. Надеюсь, это поможет вам и другим.

.resizeable {
  resize: both;
}

.noResizeable {
  resize: none;
}

.resizeable_V {
  resize: vertical;
}

.resizeable_H {
  resize: horizontal;
}
<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

person Ambuj Khanna    schedule 13.06.2019

arrow_upward
3
arrow_downward

С помощью @style вы можете задать ему нестандартный размер и отключить функцию изменения размера (resize: none;).

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
person Carlos de Jesus Baez    schedule 30.08.2018
comment
Здравствуйте, спасибо за ответ, в следующий раз отформатируйте код. - person Baptiste Mille-Mathias; 30.08.2018
comment
Это ответ на основе asp.net MVC. Очень хорошо. - person yogihosting; 27.12.2018

arrow_upward
3
arrow_downward

Чтобы отключить изменение размера для всех textareas:

textarea {
    resize: none;
}

Чтобы отключить изменение размера для определенного textarea, добавьте атрибут name или id и установите для него что-нибудь. В данном случае он называется noresize.

HTML

<textarea name='noresize' id='noresize'> </textarea>

CSS

/* Using the attribute name */
textarea[name=noresize] {
    resize: none;
}
/* Or using the id */

#noresize {
    resize: none;
}
person Abk    schedule 25.10.2016

arrow_upward
0
arrow_downward

Вы также можете попробовать с jQuery

$('textarea').css("resize", "none");
person Santosh Khalse    schedule 15.12.2016
comment
Вам следует использовать больше jquery. Вы недостаточно его используете. :) - person Filip Savic; 25.06.2018
comment
Это мем - например, Вам следует полностью отбросьте это и попробуйте jQuery.. - person Peter Mortensen; 26.09.2019

arrow_upward
0
arrow_downward

Добавление !important заставляет его работать:

width:325px !important; height:120px !important; outline:none !important;

outline просто чтобы избежать синего контура в некоторых браузерах.

person kaelds    schedule 03.02.2014
comment
Не злоупотребляйте атрибутом !important. Бессмысленно исправлять ширину и высоту, если атрибут CSS resize: none может удалить функцию изменения размера - person Raptor; 05.04.2016
comment
Разве !important не зло? - person Peter Mortensen; 26.09.2019
comment
В текущем Chrome это останавливает изменение размера по горизонтали, но я все еще могу изменять размер текстового поля по вертикали. - person Advait Junnarkar; 20.02.2020
comment
В некоторых редких случаях это может быть полезно. - person EPurpl3; 08.07.2020

arrow_upward
0
arrow_downward 

textarea {
  resize: none;
}

Приведенный выше код отключит свойство изменения размера всех элементов <textarea/> в вашем проекте. Если вы хотите, чтобы это было нормально, в противном случае вы бы захотели использовать определенный класс для своих элементов textarea.

 .not-resizable {
    resize: none;
 }

В вашем HTML

<textarea class="not-resizable"></textarea>
person Ismoil Shokirov    schedule 21.07.2021