resize
CSS
property sets whether an element is resizable, and if so, in which directions.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
resize
does not apply to the following:
overflow
property is set to
visible
/* Keyword values */ resize: none; resize: both; resize: horizontal; resize: vertical; resize: block; resize: inline; /* Global values */ resize: inherit; resize: initial; resize: unset;
resize
property is specified as a single keyword value from the list below.
none
The element offers no user-controllable method for resizing it.
both
The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.
horizontal
vertical
block
writing-mode
and
direction
value).
inline
writing-mode
and
direction
value).
| 初始值 |
none
|
|---|---|
| 适用于 |
elements with
overflow
other than
visible
, and optionally replaced elements representing images or videos, and iframes
|
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
none | both | horizontal | vertical | block | inline
In many browsers,
<textarea>
elements are resizable by default. You may override this behavior with the
resize
特性。
<textarea>Type some text here.</textarea>
textarea {
resize: none; /* Disables resizability */
}
可以使用
resize
property to make any element resizable. In the example below, a resizable
<div>
contains a resizable paragraph (
<p>
element).
<div class="resizable">
<p class="resizable">
This paragraph is resizable in all directions, because
the CSS `resize` property is set to `both` on this element.
</p>
</div>
.resizable {
resize: both;
overflow: scroll;
border: 1px solid black;
}
div {
height: 300px;
width: 300px;
}
p {
height: 200px;
width: 200px;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Basic User Interface Module Level 3
The definition of 'resize' in that specification. |
推荐 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
resize
|
Chrome 完整支持 1 | Edge 完整支持 79 | Firefox 完整支持 4 | IE 不支持 No | Opera 完整支持 12.1 | Safari 完整支持 3 | WebView Android 完整支持 37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 14 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
| Support on block level, replaced, table cell, or inline block elements | Chrome 完整支持 4 | Edge 完整支持 79 |
Firefox
完整支持
5
注意事项
|
IE 不支持 No | Opera 完整支持 15 | Safari 完整支持 4 | WebView Android 完整支持 37 | Chrome Android 完整支持 18 |
Firefox Android
完整支持
5
注意事项
|
Opera Android 完整支持 14 | Safari iOS 完整支持 3.2 | Samsung Internet Android 完整支持 1.0 |
Support for flow-relative values
block
and
inline
|
Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 63 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 完整支持 63 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
见实现注意事项。