1. ホーム
  2. html

[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?

2022-02-09 08:35:42

質問内容

のリサイズ可能なプロパティを無効化したい。 textarea .

現在、サイズを変更できるのは textarea の右下隅をクリックすることで textarea をクリックし、マウスをドラッグしてください。これを無効にするにはどうしたらよいですか?

解決方法は?

以下のCSSルールでは textarea 要素で構成されています。

textarea {
  resize: none;
}

一部で無効にする場合(全てではありませんが) textarea があるので、そこに いくつかのオプション .

を使用することができます。 class 属性は、タグの中で <textarea class="textarea1"> ):

.textarea1 {
  resize: none;
}

特定の textarea と共に name 属性に foo (すなわち <textarea name="foo"></textarea> ):

textarea[name=foo] {
  resize: none;
}

または id 属性(例. <textarea id="foo"></textarea> ):

#foo {
  resize: none;
}

W3Cページ は、リサイズ制限の値として、none、both、horizontal、vertical、inherit を挙げています。

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

まともなレビュー 互換性ページ で、現在どのブラウザがこの機能をサポートしているかを確認することができます。Jon Hulkaがコメントしているように、寸法は以下のようになります。 さらに制限される は、CSS で max-width、max-height、min-width、min-height を使用しています。

知っておきたい超重要事項

このプロパティは、overflow プロパティが visible 以外でない限り、何も行いません。したがって、一般的にこれを使用するには、overflow: scroll のような設定をする必要があります。

引用元: サラ・コープ http://css-tricks.com/almanac/properties/r/resize/