Зведення
The resize
CSS property lets you control the resizability of an element.
Initial value | none |
---|---|
Applies to | elements with overflow other than visible , and optionally replaced elements representing images or videos, and iframes |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Синтаксис
/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;
/* Global values */
resize: inherit;
resize: initial;
resize: unset;
Значення
none
- The element offers no user-controllable method for resizing the element.
both
- The element displays a mechanism for allowing the user to resize the element, which may be resized both horizontally and vertically.
horizontal
- The element displays a mechanism for allowing the user to resize the element, which may only be resized horizontally.
vertical
- The element displays a mechanism for allowing the user to resize the element, which may only be resized vertically.
block
- Depending on the
writing-mode
anddirection
value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction. inline
- Depending on the
writing-mode
anddirection
value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction.
Formal syntax
Examples
Disabling resizability of textareas
CSS
By default, <textarea>
elements are resizable in Gecko 2.0 (Firefox 4). You may override this behavior with the CSS shown below:
textarea.example {
resize: none; /* disables resizability */
}
HTML
<textarea class="example">Type some text here.</textarea>
Result
Using resize with arbitrary elements
You can use the resize property to make any element resizable. In the example below, a resizable <div>
box contains a resizable paragraph (<p>
element):
CSS
.resizable {
resize: both;
overflow: scroll;
border: 1px solid black;
}
div {
height: 300px;
width: 300px;
}
p {
height: 200px;
width: 200px;
}
HTML
<div class="resizable">
<p class="resizable">
This paragraph is resizable, because the CSS resize property is set to 'both' on this
element.
</p>
</div>
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1 The definition of 'resize' in that specification. |
Editor's Draft | Adds the values block and inline . |
CSS Basic User Interface Module Level 3 The definition of 'resize' in that specification. |
Recommendation | Initial definition |
Browser compatibility
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support (on <textarea> ) |
1.0 | 4.0 (2.0)-moz | No support | 12.1 | 3.0 (522) |
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible ) |
4.0 | 5.0 (5.0)[1] | No support | 15 | 4.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support (on <textarea> ) |
? | ? | ? | ? | ? |
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible ) |
? | ? | ? | ? | ? |
[1] resize
doesn't have any effect on <iframe>
(cf. bug 680823)