Размеры текстового поля

resize

The resize CSS property sets whether an element is resizable, and if so, in which directions.

Try it

resize does not apply to the following:

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).

Formal definition

Initial value	none
Applies to	elements with overflow other than visible , and optionally replaced elements representing images or videos, and iframes
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

resize =
none |
both |
horizontal |
vertical |
block |
inline

Источник

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 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.

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

html> html> head> title>Title of the document title> style> .comment < resize: none; height: 100px; width: 350px; > style> head> body> h2>Textarea with fixed width and height h2> form action="/form/submit" method="post"> textarea class="comment">Send your comments to the author. textarea> br> input type="submit" name="submitInfo" value="Submit"> form> body> html>

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:

html> html> head> title>Title of the document title> style> .comment < resize: none; > style> head> body> form action="/form/submit" method="post"> textarea class="comment" rows="10" cols="40">Send your comments to the author. textarea> br> input type="submit" name="submitInfo" value="Submit"> form> body> html>

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:

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 action="/form/submit" method="post"> 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>

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.

Источник

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

Сделать, чтобы размеры текстового поля созданного через тег не изменялись при помощи мыши.

Решение

В современных браузерах Firefox, Safari и Chrome в правом нижнем углу текстового поля есть небольшой уголок (рис. 1) с помощью которого мышью можно изменить размеры поля.

Рис. 1. Вид текстового поля в браузере Chrome

Вид уголка различается, но его функции остаются одинаковыми, если щёлкнуть мышью и потянуть за уголок, то можно изменить размеры поля. Чтобы запретить эту возможность, следует для селектора textarea задать свойство resize со значением none (пример 1).

Пример 1. Использование resize

HTML5 CSS3 IE Cr Op Sa Fx

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

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

Источник

How to resize texarea?

You can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse.

How to disable resizing textarea?

With above code all of your textareas will be disabled to resize. You can use class attribute in your tag —

 class="textarea1" rows="4" cols="50"> Enter your message here. 

 name="foo" rows="4" cols="50"> Enter your message here. 

textarea[name=foo]  resize: none; > 

 id="foo" rows="4" cols="50"> Enter your message here. 

This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you’ll have to set something like overflow: scroll ;

Demo

resize has below values that you can use with your text areas —
none: the element is not resizeable.
both: the user can resize the element’s height and/or width.
horizontal: the user can resize the element horizontally (increasing the width).
vertical: the user can resize the element vertically (increasing the height).
inherit: the element inherits the resize value of its parent. Below is the demo where you can click on the value names and can see the demo of selected value version of textarea —
With all that being said, I highly recommend you keep learning! Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.

Top comments (0)

Read next

Formulaires HTML : Création et l’utilisation, Les elements d’un formulaire (input, text area, buttons, checkbox, radio)

How to prevent the screen turn off after a while in Blazor

Mastering Django CI/CD using GitHub Actions

🔥🤯 Amazing Food Order hero section using HTML, CSS and JS.

I am Rajesh, a Software Engineer by profession and a Technical Blogger by passion. I am passionate about knowledge sharing, open-source contributions, connecting to people, and mentoring.

Источник

Как для поля textarea HTML запретить изменение размера?

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

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

Для поля textarea HTML запретить изменение размера можно несколькими способами.

Как в HTML полностью запретить изменение размера textarea?

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

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

Как для textarea HTML запретить изменение размера в одном направлении?

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

В таком случае было бы намного разумнее для textarea HTML запретить изменение размера, в зависимости от верстки, только в одном направлении. Например, в моем случае, при растягивании поля по ширине, поле уходит за пределы формы, и это существенно портит внешний вид. Но если растянуть поле в низ, то с версткой ничего страшного не произойдет, просто форма станет немного больше по высоте, и в тоже время, для пользователя будет намного удобнее вводить текст:

Чтобы добиться такого результата, нам нужно задать для свойства resize одно из этих значений:

• vertical – разрешает изменение размера текстового поля по вертикали
• horizontal— разрешает изменение размера по горизонтали

Источник