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

1908

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

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

  • 4
    @JDIsaaks - далее, разрешение изменения размера в определенных ситуациях может нарушить макет и принтабилить (важный аспект текущего критически важного проекта).
  • 8
    Иногда вы действительно хотите, чтобы текстовая область не изменяемого размера. Например, в этом случае, когда вы (условно) преобразуете текстовое поле во что-то, что просто выглядит как метка. Это выглядит очень странно - иметь ярлык со случайным плавающим захватом в стороне.
Теги:

14 ответов

2413
Лучший ответ

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

Поделиться
  • 0
    Есть ли решение для Firefox, Opera и / или IE?
  • 6
    @ Šime IE и FF3 (и более ранние версии) не добавляют поддержку изменения размера, поэтому решение для них не требуется. Для FF4 это решение должно работать.
Показать ещё 3 комментария
172

В CSS...

textarea {
    resize: none;
}
Поделиться
  • 1
    Мне лично этот ответ нравится больше. К точке.
82

Я нашел 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

Изображение 2579

  • FF 17.0.1

Изображение 2580

  • chrome

Изображение 2581

Поделиться
56

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

textarea { resize: none; }

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

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

Поделиться
16 
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
Поделиться
15

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

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;
}
Поделиться
  • 6
    Также используйте resize:none с этим решением, чтобы препятствовать тому, чтобы ручка появилась в нижнем углу, который расстраивает не работает.
6

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

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

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

Поделиться
  • 0
    Это атрибут HTML 5, поэтому поддерживаются только новые браузеры. Я где-то читал, IE поддерживает его с 9 лет.
  • 3
    Это работает в большинстве браузеров. в каждом последнем браузере.
Показать ещё 1 комментарий
4

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

resize: none;

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

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

  • или между тегами элемента <style>...</style>, например:

    textarea {
    resize: none;
}
Поделиться
2

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

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

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

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

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

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

textarea { 
  resize: none; 
}

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

textarea { 
  resize: both; 
}

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

textarea { 
  resize: vertical; 
}

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

textarea { 
  resize: horizontal; 
}

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

Поделиться
2

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

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

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

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

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

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

textarea {
   resize: none;
}

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

textarea { resize: vertical; }

textarea { resize: horizontal; }

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

Поделиться
1

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

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

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

$('textarea').css("resize", "none");
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню