Css textarea disable resize

О resize, об уголке resize, как убрать?

1. Возьмем поле textarea

   <textarea>Привет мир!</textarea>

   И выведем его прямо здесь:

   Привет мир!

   Как видим, что у данного «textarea» уголок растягивания присутствует…

   Что позволяет нм изменять размер поля в любые 2 стороны!

   Влево, вправо, вверх, вниз.

   Если мы откроем исследовать элемент по нашему textarea, то увидим свойства по умолчанию, где видим, что по умолчанию стоит «resize: auto;» — что означает показывать уголок!

2. Нам нужно изменить свойство «resize» по умолчанию на свое…

   «resize: auto;»

   Заменить значение «auto» — на «none»…

   resize: none;<textarea style=»resize: none» id=»dw_resize»>Привет мир!</textarea>

   То получим, что наш треугольник resize пропал.

   Привет мир!

   Вне зависимости от «resize» у нас появляется полоса прокрутки! От которой избавимся в следующий раз!

3. Вообще — при помощи css можно «убрать треугольник resize» — только выше приведенным способом.

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

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

   Убрать треугольник resize с помощью «resize: auto;» (самый простой)

   И «убрать треугольник resize» — любым другим способом… (даже думать над этим не буду)

   И в первом и втором случае растягивать «textarea» с помощью треугольника не получится… ввиду его отсутствия… больше — этот треугольник ни на что не влияет…

   Может быть человек предполагал, что textarea будет растягиваться под напором текста, так это надо совсем другое…Пример ниже :
   Привет мир!

   Html код :

   <div class=»example2″>

   <textarea id=»dw_resize»>Привет мир!</textarea>

   </div>

   CSS :

   <style>

   .example2 textarea {

   resize: none;

   height: 50px;

   min-height: 50px;

   }

   </style>

   javascript :
   Используем любой из способов…

Не благодарите, но ссылкой можете

Временная ссылка для быстрейшей индексации : список всех квадратных корней.

Теги :textarea/

How to Make Textarea Responsive

You can make the responsive in many ways. As you have seen, you can control resize handler in textarea.

You can also apply , , , , and properties to make it responsive.

In the above code, we have set so by default textarea will take the full area. But means textarea will not be bigger than 900px.

If screen size increases, textarea size will increase up to 900px not more than that. It is also helpful if you set .

Users can resize textarea input but when you set users will be able to increase the textarea up to 900px. You can also set if you want. Then users will not be able to decrease the size more than that.

It also works a similar way when you use the property. Here default height of the will be 300px.

But when you set then users will be able to increase its height up to 500px and decrease its height up to 200px.

Как запретить изменение размеров textarea

Пользователи, которые используют браузеры Firefox, Google Chrome или Safari, знают, что новые версии этих браузеров позволяют изменять размер текстовых областей на сайте. То есть у них появляется уголок, за который можно потянуть и изменить размер textarea. До недавнего времени я думал, что избавиться от этого невозможно, но не так давно узнал, что всё-таки можно. Поэтому в этой статье я познакомлю Вас с тем, как запретить изменение размеров textarea.

Пусть у нас имеется следующий HTML-код:

Если Вы запустите данный HTML-код, например, в Firefox, то увидите что в правом нижнем углу находится уголок, который позволяет изменить размер textarea. И чтобы такого не было, достаточно просто применить следующий стиль к текстовой области:

textarea <resize: none; >

Всего лишь одно свойство и проблема решена. Вот таким простым способом можно запретить изменение размеров textarea.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья : http://vk.com/myrusakov.Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 4 ):

я так понял страничка, файл должна быть в php создана?

Какой php. Тут нормально расписано. Форма делается в файле html. А стиль в файле css. А потом они друг к другу подключаются. Вот и всё. советую изучить HTML

Ага! Согласен. И CSS тоже изучите. Я вот сейчас пытаюсь изучить ООП в PHP!:) Интересная и довольно таки трудная вещь

Можно позволить изменять размеры textarea, но при этом установить «потолок» для изменения размеров. Делается это легко: max-width: ширина; max-height: высота; А такие параметры, как width и height — задают минимальную ширину/высоту textarea

Для добавления комментариев надо войти в систему.Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

How to control the textarea resizing with CSS3

In this article, we are going to learn how to make the HTML element have a fixed, unchangeable size.

To prevent a text field from being resized, you can use the CSS resize property with its «none» value.

Add this piece of code to your textarea style:

After it you can use the height and width properties to define a fixed height and width for your element.

Result

Or you can provide your size just by setting the cols and rows attributes defining the fixed number of the columns and rows.

Example of disabling the resizing of the element by using the cols and rows attributes:

You can also choose to allow users to resize your element only horizontally or vertically using the «vertical» or «horizontal» values of the resize property.

Example of disabling the resizing of the element only vertically or horizontally:

Textarea resizing is beneficial when you’re going to post a long text. Of course, often you may want to disable textarea resizing to keep your design, and it’s also remarkable. As a desired rule, however, you need to permit resizing.

How to Disable the Resizing of the Element?

Webkit-based browsers such as Chrome, Safari, have attached a new UI element to the bottom-right of text areas allowing the user to resize the textarea size just by clicking it and moving the mouse.

As we know, WebKit has a privilege over other browsers in page control and CSS features. One of these “hidden” features is the possibility to regulate the textarea resizing. Firefox has provided the same feature in Firefox 4.

How to control the textarea resizing with CSS3

In this article, we are going to learn how to make the HTML <textarea> element have a fixed, unchangeable size.

To prevent a text field from being resized, you can use the CSS resize property with its «none» value.

Add this piece of code to your textarea style:

After it you can use the height and width properties to define a fixed height and width for your <textarea> element.

Example of disabling the resizing of the <textarea> element by using a fixed height and width:

Result

Or you can provide your <textarea> size just by setting the cols and rows attributes defining the fixed number of the columns and rows.

Example of disabling the resizing of the <textarea> element by using the cols and rows attributes:

You can also choose to allow users to resize your <textarea> element only horizontally or vertically using the «vertical» or «horizontal» values of the resize property.

Example of disabling the resizing of the <textarea> element only vertically or horizontally:

Textarea resizing is beneficial when you’re going to post a long text. Of course, often you may want to disable textarea resizing to keep your design, and it’s also remarkable. As a desired rule, however, you need to permit resizing.

Browser compatibility

	Desktop	Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet
	Yes	12	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes В отличие от других основных браузеров, к отключенным элементам применяется стиль по умолчанию .	Yes
	66	No См. Проблему 758078 .	59	No	No	Yes См. Ошибку 150731 .	66	66	59	No	No	9.0
	1	12	1	≤6	≤12.1	≤4	4.4	18	4	≤12.1	≤3	1.0
	17	79	No	No	≤12.1	6	≤37	18	No	≤12.1	6	1.0
	1	12	1	≤6	≤12.1	≤4	4.4	18	4	≤12.1	≤3	1.0
	1	12	1	≤6	≤12.1	≤4	4.4	18	4	≤12.1	≤3	1.0
	4	12	4	10	≤12.1	5	≤37	18	4	≤12.1	5	1.0
	40	17	51	No	27	10.1	40	40	51	27	10.3	4.0
	1	12	1	≤6	≤12.1	≤4	4.4	18	4	≤12.1	≤3	1.0
	4	12	4	10	≤12.1	5	≤37	18	4	≤12.1	5	1.0
	1	12	1	≤6	≤12.1	≤4	4.4	18	4	≤12.1	≤3	1.0
	4	12	4	10	≤12.1	5	≤37	18	4	≤12.1	5	1.0
	1	12	1	≤6	≤12.1	≤4	4.4	18	4	≤12.1	≤3	1.0
	Yes	12	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes
	16	12	4	≤6	≤12.1	6	≤37	18	4	≤12.1	6	1.0

Attributes

Этот элемент включает глобальные атрибуты .

Этот атрибут указывает,может ли значение элемента управления автоматически заполняться браузером.Возможные значения:

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

Если атрибут не указан в элементе , тогда браузер использует значение атрибута владельца формы элемента . Владелец формы — это либо элемент , потомком которого является этот элемент , либо элемент формы, которого задан атрибутом входного элемента. Для получения дополнительной информации см. Атрибут в .

Non-standard

Строка, которая указывает, следует ли активировать автоматическое исправление орфографии и обработку текстовых замен (если они настроены), пока пользователь редактирует это . Допустимые значения:

Включите автоматическую коррекцию орфографии и замену текста.

Отключите автоматическую коррекцию орфографии и замену текста.

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

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

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

Элемент формы, с которым связан элемент (его «владелец формы»). Значение атрибута должно быть элемента формы в том же документе. Если этот атрибут не указан, элемент должен быть потомком элемента формы. Этот атрибут позволяет размещать элементы в любом месте документа, а не только как потомки элементов формы.

Максимальное количество символов (кодовые единицы UTF-16),которое может ввести пользователь.Если это значение не указано,пользователь может ввести неограниченное количество символов.

Минимальное количество символов (кодовые единицы UTF-16),которое должен ввести пользователь.

Название управления.

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

Примечание. Заполнители следует использовать только для демонстрации примера типа данных, которые следует вводить в форму; они не заменяют соответствующий элемент , привязанный к вводу. Полное объяснение см. В разделе в элементе <input>: The Input (Form Input) .

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

Данный атрибут указывает,что пользователь должен заполнить значение перед отправкой формы.

Количество видимых строк текста для элемента управления.Если оно указано,то должно быть целым положительным числом.Если оно не указано,значение по умолчанию равно 2.

Указывает, подлежит ли проверке орфографии базовым браузером / ОС. Значение может быть:

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

Указывает,как управление обертывает текст.Возможные значения:

• : браузер автоматически вставляет разрывы строк (CR + LF) так, чтобы ширина каждой строки не превышала ширину элемента управления; атрибут также должен быть определен для того чтобы этот эффект.
• : браузер гарантирует, что все разрывы строк в значении состоят из пары CR + LF, но не вставляет никаких дополнительных разрывов строк.
• Non-standard : Подобно , но изменяет внешний вид на so сегменты строк, превышающие , не переносятся, и становится прокручиваемым по горизонтали.

Если этот атрибут не указан, по умолчанию используется .

Styling with CSS

is a replaced element — it has intrinsic dimensions, like a raster image. By default, its value is block. Compared to other form elements it is relatively easy to style, with its box model, fonts, color scheme, etc. being easily manipulable using regular CSS.

Styling HTML forms provides some useful tips on styling s.

Baseline inconsistency

The HTML specification doesn’t define where the baseline of a is, so different browsers set it to different positions. For Gecko, the baseline is set on the baseline of the first line of the textarea’s first line, on another browser it may be set on the bottom of the box. Don’t use on it; the behavior is unpredictable.

Controlling whether a textarea is resizable

In most browsers, s are resizable — you’ll notice the drag handle in the right hand corner, which can be used to alter the size of the element on the page. This is controlled by the CSS property — resizing is enabled by default, but you can explicitly disable it using a value of :

textarea {
  resize: none;
}

Styling valid and invalid values

Valid and invalid values of a element (e.g. those within, and outside the bounds set by , , or ) can be highlighted using the and pseudo-classes. For example, to give your textarea a different border depending on whether it is valid or invalid:

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
   border: 2px solid lime;
}

Syntax

/* Keyword values */ resize none; resize both; resize horizontal; resize vertical; resize block; resize inline; /* Global values */ resize inherit; resize initial; resize revert; resize revert-layer; resize unset; 

The resize property is specified as a single keyword value from the list below.

Values

The element offers no user-controllable method for resizing it.

The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.

The element displays a mechanism for allowing the user to resize it in the horizontal direction.

The element displays a mechanism for allowing the user to resize it in the vertical direction.

The element displays a mechanism for allowing the user to resize it in the block direction (either horizontally or vertically, depending on the writing-mode and direction value).

The element displays a mechanism for allowing the user to resize it in the inline direction (either horizontally or vertically, depending on the writing-mode and direction value).

Examples

Basic example

The following example show a very simple textarea, with a set numbers of rows and columns and some default content.

<textarea name="textarea"
   rows="10" cols="50">Write something here</textarea>

Min and max length

This example has a minimum and maximum number of characters — of 10 and 20 respectively. Try it and see.

<textarea name="textarea"
   rows="5" cols="30"
   minlength="10" maxlength="20">Write something here</textarea>

Note that doesn’t stop the user from removing characters so that the number entered goes past the minimum, but it does make the value entered into the invalid. Also note that even if you have a value set (3, for example), an empty is still considered valid unless you also have the attribute set.

Placeholder

This example has a placeholder set. Notice how it disappears when you start typing into the box.

<textarea name="textarea"
   rows="5" cols="30"
   placeholder="Comment text."></textarea>

Note: Placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper element tied to the input. See in <input>: The Input (Form Input) element for a full explanation.

Disabled and readonly

This example shows two s — one of which is , and one of which is . Have a play with both and you’ll see the difference in behavior — the element is not selectable in any way (and its value is not submitted), whereas the element is selectable and its contents copyable (and its value is submitted); you just can’t edit the contents.

Note: In browsers other than firefox, such as chrome, the textarea content may be selectable and copyable.

<textarea name="textarea"
   rows="5" cols="30"
   disabled>I am a disabled textarea</textarea>
<textarea name="textarea"
   rows="5" cols="30"
   readonly>I am a readonly textarea</textarea>

Try it

В приведенном выше примере демонстрируется ряд возможностей :

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

Элемент также принимает несколько атрибутов, общих для формирования , таких как , , , , только для и .

Стиль с CSS

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

Стилизация HTML-форм дает несколько полезных советов по стилизации .

Baseline inconsistency

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

Управление масштабируемостью тестареа

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

textarea {
  resize: none;
}

Стилизация действительных и недействительных значений

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

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
   border: 2px solid lime;
}

HTML тег

HTML тег <textarea> определяет многострочное текстовое поле. Количество символов, которое можно ввести в поле не ограничено, а введенный текст отображается моноширинным шрифтом.

По умолчанию поле ввода элемента <textarea> , при отображении в браузере, можно растянуть (изменить его размер), потянув за нижний правый угол. Если вам нужно запретить изменение размера <textarea> , то нужно прописать CSS свойство resize со значением none в атрибуте style , в этом случае получится запретить растягивать только данное поле ввода:

Либо можно прописать resize: none; в стилях, тогда правило примениться ко всем многострочным текстовым полям:

Размер текстового поля, заданный по умолчанию, может в разных браузерах быть разным. Для указания нужного размера можно воспользоваться атрибутами rows и cols или изменить ширину и высоту элемента с помощью CSS.

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

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

Атрибуты

Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях.

cols: Указывает положительное целое число, определяющее ширину текстового поля (единицей измерения выступает ширина одного символа). Если атрибут не указан, то используется значение по умолчанию — 20. disabled: Указывает, что текстовая область будет неактивна, т.е. не будет возможности вводить текст или изменять и копировать текст, заданный по умолчанию. Возможные значения логического атрибута disabled : form: Определяет форму с которой связан элемент <textarea> . В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать многострочное текстовое поле в произвольном месте документа, а не только в качестве потомка элемента <form> .

Примечание: атрибут form не поддерживается браузером Internet Explorer.

maxlength: Определяет максимально количество символов, которое можно будет ввести в текстовое поле.

Примечание: атрибут maxlength не поддерживается в IE9 и более ранних версия, и в Opera.

name: Определяет имя для элемента. placeholder: Определяет короткую подсказку, которая описывает ожидаемое значение для текстового поля. Подсказка будет отображаться в текстовом поле, когда оно пустое, и исчезнет при получение им фокуса.

Примечание: атрибут placeholder не поддерживается в IE9 и более ранних версия.

readonly: Указывает, что текстовое поле будет доступно только для чтения, т.е. текст невозможно будет изменить, но будет возможность его скопировать. Возможные значения логического атрибута readonly : required: Указывает, что текстовое поле должно быть заполнено перед отправкой формы на сервер.

Примечание: атрибут required не поддерживается браузерами Internet Explorer и Safari.

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

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

22 ответа

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

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

Чтобы отключить определенный textarea с name атрибут установлен в foo (То есть, <textarea name=»foo»></textarea> ):

Или, используя id атрибут (т.е. <textarea ></textarea> ):

На странице W3C перечислены возможные значения ограничений на изменение размера: нет, как горизонтальное, вертикальное и наследовать:

Просмотрите страницу достойной совместимости, чтобы увидеть, какие браузеры в настоящее время поддерживают эту функцию. Как прокомментировал Джон Халка, размеры могут быть дополнительно ограничены в CSS с помощью max-width, max-height, min-width и min-height.

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

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

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

Еще одна особенность формата — переполнение: автоматическое избавление от правильной полосы прокрутки с учетом атрибута dir

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

FF 17.0.1

хром

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

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

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