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

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

Enter image description here

3015
user549757 8 Мар 2011 в 19:15

16 ответов

Лучший ответ

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

textarea {
  resize: none;
}

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

Вы можете использовать атрибут 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/

3888
JSman225 22 Май 2021 в 05:07

В CSS ...

textarea {
    resize: none;
}
225
Jeff Parker 8 Мар 2011 в 16:17

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

Первый

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

Enter image description here

  • Firefox 17.0.1

Enter image description here

  • Хром

Enter image description here

117
Community 20 Июн 2020 в 09:12

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

textarea { resize: none; }

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

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

67
Peter Mortensen 26 Сен 2019 в 09:24
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
29
Imtiaz Ali Baigal 6 Ноя 2013 в 09:19

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

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;
}
23
Peter Mortensen 26 Сен 2019 в 09:31

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

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

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

17
Peter Mortensen 26 Сен 2019 в 09:32

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

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

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

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

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

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

textarea {
  resize: none;
}

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

textarea {
  resize: both;
}

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

textarea {
  resize: vertical;
}

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

textarea {
  resize: horizontal;
}

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

9
Peter Mortensen 26 Сен 2019 в 09:39

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

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

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

    textarea {
        resize: none;
    }
    
8
Quentin 10 Май 2018 в 13:19

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

textarea {
    resize: none;
}

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

resize: vertical;

Или

resize: horizontal;
7
Peter Mortensen 26 Сен 2019 в 09:40

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 */

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

5
Peter Mortensen 26 Сен 2019 в 09:33

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

.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>
4
Ambuj Khanna 13 Июн 2019 в 05:18

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

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
3
Baptiste Mille-Mathias 30 Авг 2018 в 19:21

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

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;
}
3
Peter Mortensen 26 Сен 2019 в 09:35

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

$('textarea').css("resize", "none");
0
Santosh Khalse 15 Дек 2016 в 08:15

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

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

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

0
Peter Mortensen 26 Сен 2019 в 09:29