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

Я хочу отключить свойство resize для textarea.

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

1908
задан user549757 08 марта '11 в 19:15
источник поделиться
14 ответов

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

textarea {
    resize: none;
}

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

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

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

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

Цитата: Chris Coyier, http://css-tricks.com/almanac/properties/r/resize/

2540
ответ дан Donut 08 марта '11 в 19:17
источник поделиться

В CSS...

textarea {
    resize: none;
}
164
ответ дан Jeff Parker 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

86
ответ дан Rami Jamleh 27 дек. '12 в 23:58
источник поделиться

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

textarea { resize: none; }

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

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

54
ответ дан James Sumners 08 марта '11 в 19:35
источник поделиться
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
16
ответ дан Imtiaz Ali Baigal 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;
}
15
ответ дан yevgeniy 12 февр. '15 в 15:14
источник поделиться

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

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

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

6
ответ дан Thusitha 21 июля '15 в 8:18
источник поделиться

БОЛЬШОЙ ВОПРОС! Чтобы отключить свойство resize, используйте следующее свойство CSS:

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

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

    textarea {
        resize: none;
    }
    
4
ответ дан Webeng 12 июня '16 в 13:43
источник поделиться

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

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

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

2
ответ дан kaelds 03 февр. '14 в 22:07
источник поделиться

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

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

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

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

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

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

textarea { 
  resize: none; 
}

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

textarea { 
  resize: both; 
}

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

textarea { 
  resize: vertical; 
}

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

textarea { 
  resize: horizontal; 
}

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

2
ответ дан Alireza 01 июня '17 в 16:11
источник поделиться

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

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

2
ответ дан Oriol 31 окт. '15 в 2:26
источник поделиться

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

textarea {
   resize: none;
}

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

textarea { resize: vertical; }

textarea { resize: horizontal; }

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

1
ответ дан Faisal 19 февр. '17 в 22:52
источник поделиться

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

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;
}
1
ответ дан Abk 25 окт. '16 в 11:19
источник поделиться

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

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

Другие вопросы по меткам