"54.235.4.196 - 54.235.4.196"

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

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

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

enter image description here

2352
08 марта '11 в 19:15
источник поделиться
18 ответов

Следующее правило 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/

3125
08 марта '11 в 19:17
источник

В CSS...

textarea {
    resize: none;
}
193
08 марта '11 в 19:17
источник

Я нашел 2 вещи

первый

textarea{resize:none}

это css3, который еще не выпущен, совместимый с Firefox4 + 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>

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

  • IE8

enter image description here

  • FF 17.0.1

enter image description here

  • chrome

enter image description here

100
27 дек. '12 в 23:58
источник

CSS3 имеет новое свойство для элементов пользовательского интерфейса, которое позволит вам это сделать. Свойство - свойство resize. Поэтому вы должны добавить в таблицу стилей следующее, чтобы отключить изменение размера всех элементов textarea:

textarea { resize: none; }

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

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

60
08 марта '11 в 19:35
источник
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
23
06 нояб. '13 в 12: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;
}
20
12 февр. '15 в 15:14
источник

Это можно сделать в html easy

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

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

12
21 июля '15 в 8:18
источник

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

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

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

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

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

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

textarea { 
  resize: none; 
}

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

textarea { 
  resize: both; 
}

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

textarea { 
  resize: vertical; 
}

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

textarea { 
  resize: horizontal; 
}

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

5
01 июня '17 в 16:11
источник

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

resize: none;
  • Вы можете применить это как свойство встроенного стиля следующим образом:

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

    textarea {
        resize: none;
    }
    
5
12 июня '16 в 13:43
источник

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

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

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

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

3
31 окт. '15 в 2:26
источник

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

textarea{
    resize: none;
}

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

resize: vertical;

или же

resize: horizontal;
3
28 мая '18 в 10:09
источник

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

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
1
30 авг. '18 в 19:00
источник

Вы можете сделать это, используя свойство css resize.

textarea {
   resize: none;
}

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

textarea { resize: vertical; }

textarea { resize: horizontal; }

Наконец, resize: both разрешает захват размера.

1
19 февр. '17 в 22:52
источник

попробуй это:

#foo {
    resize: none;
}
<textarea rows="4" cols="50" name="foo" id="foo">
Minisoft is the best Website and Software Development company providing various IT services to individual and corporate clients globally. http://minisoft.com.bd
</textarea>
1
05 июля '18 в 12:59
источник

Добавление! important делает работу:

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

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

0
03 февр. '14 в 22:07
источник

Если по какой-то причине вам необходимо удалить функцию изменения размера вашего поля textarea, CSS3 дает возможность контролировать изменение размера textarea. Чтобы предотвратить изменение размера текстового поля, вы можете использовать CSS-свойство resize со значением "none".

Добавьте этот простой кусок кода к вашему стилю textarea:

 textarea {
  resize: none;
}

Смотрите другие примеры здесь. Как отключить изменение размера элемента <textarea>?

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .vertical { 
      resize: vertical; 
      }
      .horizontal { 
      resize: horizontal; 
      }
    </style>
  </head>
  <body>
    <h2>Resize the textarea only vertically</h2>
    <form>
      <textarea class="vertical" rows="8" cols="50">Send your comments to the author.</textarea>
      <h2>Resize the textarea only horizontally</h2>
      <textarea class="horizontal" rows="8" cols="50">Send your comments to the author.</textarea>
    </form>
  </body>
</html>
0
15 апр. '19 в 14:38
источник

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

textarea {
    resize: none;
}

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

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

CSS

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

#noresize{
resize: none;
}
0
25 окт. '16 в 11:19
источник

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

$('textarea').css("resize", "none");
0
15 дек. '16 в 11:08
источник

Посмотрите другие вопросы по меткам или Задайте вопрос