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

2651

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

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

html css user549757
источник

4

@JDIsaaks - далее, разрешение изменения размера в определенных ситуациях может нарушить макет и принтабилить (важный аспект текущего критически важного проекта).

random_user_name

10

Иногда вы действительно хотите, чтобы текстовая область не изменяемого размера. Например, в этом случае, когда вы (условно) преобразуете текстовое поле во что-то, что просто выглядит как метка. Это выглядит очень странно - иметь ярлык со случайным плавающим захватом в стороне.

neminem

2

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

суперсветовой

3533

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

textarea {
  resize: none;
}

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

Чтобы отключить конкретный 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, min-width и min-height.

Супер важно знать:

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

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

Пончик
источник

Есть ли решение для Firefox, Opera и / или IE?

Шиме Видас

6

@ Šime IE и FF3 (и более ранние версии) не добавляют поддержку изменения размера, поэтому решение для них не требуется. Для FF4 это решение должно работать.

Пончик

24

согласно davidwalsh.name/textarea-resize - используйте resize: вертикальный или resize: горизонтальный, чтобы ограничить изменение размера одним измерением. Или используйте любой из max-width, max-height, min-width и min-height.

Джон Халка

3

Я единственный, кто считает странным устанавливать это с помощью CSS, а не атрибутов? Почему я не могу затем установить отключенные или проверенные или другие свойства с помощью CSS ...

Buksy

6

@Buksy Потому что «отключен» - это состояние, а не визуальное свойство. Таким образом, логично, что это не должно решаться языком стилей .

Кролтан

206

В CSS ...

textarea {
    resize: none;
}

Джефф Паркер
источник

105

Я нашел две вещи:

Первый

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

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

Хром

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

Рами Джамле
источник

62

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

textarea { resize: none; }

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

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

Джеймс Самнерс
источник

Но это был бы пользователь, преднамеренно нарушающий их макет, а не пользователь, которому просто нужно изменить размер его / ее texareaи в итоге заставить что-то не работать

Redwolf Programs

25

<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

Имтиаз Али Байгал
источник

21

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

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;
}

Yevgeniy
источник

7

Также используйте resize:noneэто решение для предотвращения появления ручки в нижнем углу, которая не работает.

MacroMan

13

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

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

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

Тисита Викрамасингхе
источник

Это атрибут HTML 5, поэтому поддерживаются только новые браузеры. Я где-то читал, IE поддерживает его с 9 лет.

Энтони Д'Андреа

4

Это работает в большинстве браузеров. в каждом последнем браузере.

Тусита Викрамасингхе

это не помешает изменению размера текстовой области

Мишко Владимир,

@ AntonyD'Andrea Это не работает на последнем Chrome: jsfiddle.net/ps2v8df9

Advait Junnarkar

6

Чтобы отключить свойство resize, используйте следующее свойство CSS:

resize: none;

Вы можете применить это как свойство встроенного стиля следующим образом:
```
<textarea style="resize: none;"></textarea>
```
или между <style>...</style>тегами элементов, например, так:
```
textarea {
    resize: none;
}
```

Webeng
источник

6

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

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

Примечание. Свойство resize применяется к элементам, чье значение переполнения отличается от «visible».

Также изменение размера не поддерживается в Internet Explorer на данный момент.

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

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

textarea {
  resize: none;
}

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

textarea {
  resize: both;
}

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

textarea {
  resize: vertical;
}

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

textarea {
  resize: horizontal;
}

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

Алиреза
источник

3

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

Посмотреть демо

Ориоль
источник

3

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

textarea {
    resize: none;
}

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

resize: vertical;

или

resize: horizontal;

Питер Мортенсен
источник

2

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

.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>

Развернуть фрагмент

Амбудж Ханна
источник

1

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

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })

Карлос де Хесус Баез
источник

1

Здравствуйте, спасибо за ваш ответ, в следующий раз, пожалуйста, отформатируйте код.

Креститель Милле-Матиас

Это ответ на основе asp.net MVC. Очень хорошо.

yogihosting

0

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

$('textarea').css("resize", "none");

Сантош Халсе
источник

3

Вы должны использовать больше jquery . Вы не используете это достаточно. :)

Филип Савич

1

Это мем - например, «Вы должны полностью отказаться от этого и попробовать jQuery». ,

Питер Мортенсен

0

Чтобы отключить изменение размера для всех 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;
}

АБК
источник

-2

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

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

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

kaelds
источник

6

Не злоупотребляйте !importantатрибутом. Бессмысленно фиксировать ширину и высоту, если атрибут CSS resize: noneможет удалить функцию изменения размера

Raptor

1

Разве это не !importantзло?

Питер Мортенсен

В текущем Chrome это останавливает горизонтальное изменение размера, но я все еще могу изменить размер текстовой области по вертикали.

Адвайт Джуннаркар

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

Ответы:

Супер важно знать:

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

HTML

CSS