resize property modifies an element's ability to be manually resized by a user. It allows this adjustment along the vertical, horizontal, or both axes, or it can completely disable this ability.
However, it's crucial to note that the
resize property does not apply to inline elements or block elements with an
overflow value set to
Examples and Usage
resize property can be used in various contexts, such as controlling the resizing behavior of
<textarea>. It can range from disabling resizing completely to allowing resizing only in a specific direction. But, bear in mind that this should be applied thoughtfully, taking into account user experience implications.
Consider the following example:
<textarea class="example">A non-resizable text area</textarea>
By default, most browsers allow the
<textarea> element to be resized both vertically and horizontally. This provides users with flexibility but can also disrupt the visual coherence of your layout. Hence, in some cases, you might want to limit or even disable this behavior.
In the HTML code above, we have two
<textarea> elements. The first one, without any class, is a regular
<textarea> that can be resized both vertically and horizontally by default. The second one has the class
.example, which we'll use to disable the resizing in the CSS:
resize: none; /* disables the resizing of the textarea */
You can also limit the textarea's resizing to the vertical direction only. This can help maintain the integrity of the page layout while providing users with a way to view more of their input if needed:
resize: vertical; /* restricts the resizing of the textarea to vertical only */
When a user resizes an element, the browser sets the
height properties to reflect the user's preference. However, these changes are subject to any restrictions imposed by the
max-height properties. The precise direction of resizing may depend on several factors, including the element's positioning and the document's language direction.
|No resizing mechanism is offered by the element to the user.
|The element shows a resizing mechanism, allowing the user to resize it both horizontally and vertically.
|The element shows a user-controllable, resizing mechanism for resizing in the horizontal direction.
|The element shows a user-controllable, resizing mechanism for resizing in the vertical direction.
Note: In addition, there are also experimental values like
inlinethat allow resizing along the block or inline direction depending on the
directionvalues. These are still experimental and might change or have inconsistent behavior across different browsers.
Tips and Tricks
Keep in mind that while
resizecould be a valuable tool for user interaction, it also comes with potential challenges in terms of maintaining the visual balance and coherence of your layout. Always consider the overall user experience when deciding how and where to apply this property.
resizeproperty does not apply to inline elements or block-level elements when
overflowis set to
visible. In these cases, to make an element resizable, it should be a block-level element, and
overflowshould be set to
The resizing mechanism should not be confused with the scrolling mechanism or any user agent mechanism for zooming. While the scrolling mechanism controls which part of an element's contents is displayed, the resizing mechanism affects the dimensions of the element itself.
For a more detailed breakdown of partial support and vendor prefix usage in specific older versions, refer to the first link in the Useful Resources below.
Caution: Early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.