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

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

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

2207
css html

16 ответов

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

textarea {
  resize: none;
}

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

чтобы отключить определенный textarea С значение foo (т. е. <textarea name="foo"></textarea>):

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

или через (т. е. <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.

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

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

цитата Криса Койера, http://css-tricks.com/almanac/properties/r/resize/

2936

в CSS ...

textarea {
    resize: none;
}
176

Я нашел 2 вещи

первый 

textarea{resize:none}

это css3 который еще не освобожден compatable с Firefox4 + chrome и safari

еще одна особенность формата:переполнение:авто чтобы избавиться от правой полосы прокрутки с учетом 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

  • хром

enter image description here

93

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

textarea { resize: none; }

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

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

57
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
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;
}
18

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

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

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

9

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

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

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

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

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

Нет Размер:

textarea { 
  resize: none; 
}

изменение размера в обе стороны (по вертикали и горизонтали):

textarea { 
  resize: both; 
}

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

textarea { 
  resize: vertical; 
}

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

textarea { 
  resize: horizontal; 
}

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

4

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

resize: none;

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

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

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

    textarea {
    resize: none;
}
4

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

См. Demo

2

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

#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

добавлять !важно заставляет его работать:

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

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

0

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

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

можно просто отключить textarea вот так:

textarea{
    resize: none;
}

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

resize: vertical;

или

resize: horizontal;
0

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

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

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

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