Html css textarea resize

How to Set the Size of the Element

There are two ways of setting the size of the HTML element. You can use HTML or CSS.

In HTML, you can use the cols and rows attributes. Let’s see this solution in use.

Example of setting the textarea size with HTML:

html> html> head> title>Title of the document title> head> body> form action="/form/submit" method="post"> textarea name="textarea" rows="5" cols="40">Write something here textarea> br> input type="submit" name="submitInfo" value="Submit"> form> body> html>

Result

In CSS, you need to use the width and height properties for the element.

Example of setting the textarea size with CSS:

html> html> head> title>Title of the document title> style> textarea < width: 250px; height: 100px; > style> head> body> form action="/form/submit" method="post"> textarea> textarea> br> input type="submit" name="submitInfo" value="Submit"> form> body> html>

How to make a textarea in HTML the same size as its contents?

To make a textarea in HTML the same size as its contents, you can use JavaScript to adjust the height of the textarea dynamically based on its content. Here’s an example of how to do it using jQuery:

html> html> head> title>Resizable Textarea title> script src="https://code.jquery.com/jquery-3.6.0.min.js"> script> style> textarea < min-height: 50px; padding: 10px; font-size: 16px; line-height: 1.5; resize: none; /* disable resizing */ > style> head> body> textarea id="myTextarea"> textarea> script> $(document).ready(function ( ) < $("#myTextarea").on("input", function ( ) < this.style.height = "auto"; this.style.height = this.scrollHeight + 10 + "px"; >); >); script> body> html>

In this example, we first define some CSS styles for the textarea to set its minimum height, padding, font size, line height, and to disable resizing. Then, we use jQuery to attach an event handler to the textarea’s input event. This event fires whenever the textarea’s content changes.

Inside the event handler, we first set the textarea’s height to «auto» to reset it to its default height. Then, we set its height to the scroll height (which includes the content height and any padding or borders) plus an additional 10 pixels of padding. This ensures that the textarea’s height is always large enough to fit its content.

By doing this, the textarea will dynamically adjust its height to match the height of its content as the user types or pastes into it.

How to set a fixed height and width for a textarea element in HTML?

You can set a fixed height and width for a textarea element in HTML by using the rows and cols attributes. The rows attribute sets the number of visible text lines in the textarea, while the cols attribute sets the number of visible characters per line.

To disable the resizing capability of the textarea, you can use the resize property in CSS and set it to none .

Here’s an example of how to set a fixed height and width for a textarea element:

html> html> head> title>Resizable Textarea title> head> body> textarea rows="10" cols="50" style="resize: none;"> textarea> body> html>

In this example, the textarea has a fixed height of 10 rows and a fixed width of 50 characters per row. The resize property is set to none to disable resizing.

Источник

resize

Указывает, можно ли пользователю изменять размеры текстового поля.

Краткая информация

Значение по умолчанию	none
Наследуется	Нет
Применяется	К или к любому элементу, у которого свойство overflow отличается от visible
Анимируется	Нет

Синтаксис

resize: none | both | horizontal | vertical

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

none Размеры элемента не изменяются. both Можно изменять размеры элемента по горизонтали и вертикали. horizontal Можно изменять размеры элемента только по горизонтали. vertical Можно изменять размеры элемента только по вертикали.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

Объектная модель

Примечание

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

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

См. также

Рецепты

Практика

Справочник CSS

• !important
• ::after
• ::backdrop
• ::before
• ::first-letter
• ::first-line
• ::placeholder
• ::selection
• :active
• :blank
• :checked
• :default
• :disabled
• :empty
• :enabled
• :first-child
• :first-of-type
• :focus
• :focus-within
• :fullscreen
• :hover
• :in-range
• :indeterminate
• :invalid
• :lang
• :last-child
• :last-of-type
• :link
• :not
• :nth-child
• :nth-last-child
• :nth-last-of-type
• :nth-of-type
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :placeholder-shown
• :read-only
• :read-write
• :required
• :root
• :target
• :valid
• :visited
• @charset
• @document
• @font-face
• @import
• @keyframes
• @media
• @page
• @supports
• @viewport
• align-content
• align-items
• align-self
• all
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• aspect-ratio
• backdrop-filter
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• block-size
• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-decoration-break
• box-shadow
• box-sizing
• caption-side
• caret-color
• clear
• clip
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• font-family
• font-kerning
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• height
• hyphens
• image-rendering
• justify-content
• left
• letter-spacing
• line-clamp
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• marks
• max-height
• max-width
• min-height
• min-width
• mix-blend-mode
• object-fit
• opacity
• order
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-x
• overflow-y
• padding
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• perspective
• perspective-origin
• place-content
• pointer-events
• position
• quotes
• resize
• right
• scroll-behavior
• tab-size
• table-layout
• text-align
• text-align-last
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-fill-color
• text-indent
• text-orientation
• text-overflow
• text-shadow
• text-stroke
• text-stroke-color
• text-stroke-width
• text-transform
• top
• transform
• transform-origin
• transform-style
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• visibility
• white-space
• widows
• width
• word-break
• word-spacing
• word-wrap
• writing-mode
• z-index
• zoom

Источник

resize¶

Свойство resize указывает, можно ли пользователю изменять размеры текстового поля.

Демо¶

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

Значения¶

none Размеры элемента не изменяются. both Можно изменять размеры элемента по горизонтали и вертикали. horizontal Можно изменять размеры элемента только по горизонтали. vertical Можно изменять размеры элемента только по вертикали.

Примечание¶

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

Значение по-умолчанию: none

Спецификации¶

Поддержка браузерами¶

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

 html> head> meta charset="utf-8" /> title>resizetitle> style> textarea  resize: both; > style> head> body> p> Потяните за правый уголок, чтобы изменить размер текстового поля. p> p>textarea cols="30" rows="7">textarea>p> body> html> 

Источник