resize

Overview

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

Examples and Usage

The 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>(Default) resizible</textarea>
<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:

.example {
  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:

.example {
  resize: vertical; /* restricts the resizing of the textarea to vertical only */
}

When a user resizes an element, the browser sets the width and height properties to reflect the user's preference. However, these changes are subject to any restrictions imposed by the min-width, max-width, min-height, and max-height properties. The precise direction of resizing may depend on several factors, including the element's positioning and the document's language direction.

For more advanced control over an element's resizing behavior, JavaScript may come in handy. For instance, you could create a textarea that automatically expands as the user types, as seen in this approach.

Values

Note: In addition, there are also experimental values like block and inline that allow resizing along the block or inline direction depending on the writing-mode and direction values. These are still experimental and might change or have inconsistent behavior across different browsers.

Associated Properties

• overflow

Tips and Tricks

• Keep in mind that while resize could 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.

• Remember, the resize property does not apply to inline elements or block-level elements when overflow is set to visible. In these cases, to make an element resizable, it should be a block-level element, and overflow should be set to scroll, auto, or hidden.

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

Browser Compatibility

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.

Useful Resources

Can I use: resize

W3C's Editor's Draft of CSS Basic User Interface Module Level 4: resize

Context on UX Consideration for resize: none