⌘K

resizeプロパティ

resize プロパティは、 textarea または他の要素（他の要素ではすべてのブラウザで動作するわけではありません）のサイズ変更を禁止または許可します。

構文

cssセレクタ {
  resize: both | horizontal | vertical | none;
}

値

値 説明
both 要素を幅と高さの両方向にリサイズできます。
horizontal 要素を幅方向のみにリサイズできます。
vertical 要素を高さ方向のみにリサイズできます。
none 要素のサイズを変更できません。

デフォルト値: none。一部のブラウザでの textarea に対する値: both。 resize をサポートしていないブラウザでは、textarea は none が指定されているかのように動作します。

例 . both 値

要素を両方向にリサイズします: 

html<textarea></textarea>
csstextarea {
  resize: both;
  width: 200px;
  height: 200px;
}

Результат:

例 . horizontal 値

要素を水平方向のみにリサイズします: 

html<textarea></textarea>
csstextarea {
  resize: horizontal;
  width: 200px;
  height: 200px;
}

Результат:

例 . vertical 値

要素を垂直方向のみにリサイズします: 

html<textarea></textarea>
csstextarea {
  resize: vertical;
  width: 200px;
  height: 200px;
}

Результат:

例 . none 値

要素を一切リサイズできません: 

html<textarea></textarea>
csstextarea {
  resize: none;
  width: 200px;
  height: 200px;
}

Результат:

例 . 幅と高さの制限

max-width、 min-width、 max-height、 min-height プロパティを使用して、最小幅・最大幅、最小高さ・最大高さを制限できます: 

html<textarea></textarea>
csstextarea {
  resize: both;
  min-height: 100px;
  max-height: 300px;
  min-width: 100px;
  max-width: 300px;
}

Результат:

Backdisplay プロパティNextプロパティ aspect-ratio