ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS でテキスト領域のサイズ変更を無効にしたり制御するにはどうすればよいですか?

CSS でテキスト領域のサイズ変更を無効にしたり制御するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-12-24 16:26:15
オリジナル
736 人が閲覧しました

How Can I Disable or Control Resizing of Text Areas in CSS?

TextArea のサイズ変更を無効にする

テキスト領域を操作する場合、ユーザーによるサイズ変更の機能を制限する必要が生じる場合があります。デフォルトの動作では、ユーザーは右下隅をクリックしてドラッグすることでテキスト領域の高さと幅を調整できます。

このサイズ変更機能を無効にするには、次の CSS ルールを実装します:

textarea {
  resize: none;
}
ログイン後にコピー

このルールにより、ユーザーはページ上のテキスト領域要素のサイズを変更できなくなります。ただし、特定のテキスト領域のみのサイズ変更を無効にする必要がある場合は、別の方法を使用できます:

  • クラス属性: HTML タグでクラス属性を使用して、サイズ変更を無効にします。特定のテキストのセットarea.
.textarea1 {
  resize: none;
}
ログイン後にコピー
  • Name 属性: 特定の name 属性を持つテキストエリアのサイズ変更を無効にします。
textarea[name=foo] {
  resize: none;
}
ログイン後にコピー
  • ID 属性: サイズ変更を無効にする特定の ID 属性を持つテキストエリアの場合。
#foo {
  resize: none;
}
ログイン後にコピー

さらに、次の値を使用して、適用するサイズ変更制限の種類を指定できます:

  • なし (デフォルト): すべてを無効にしますresizing.
  • both: 水平方向と垂直方向の両方のサイズ変更が可能です。
  • horizo​​ntal: 水平方向のサイズ変更のみが可能です。
  • vertical: 垂直方向のみを許可しますresizing.
  • inherit: 親要素からサイズ変更プロパティを継承します。

サイズ変更プロパティは、オーバーフロー プロパティが変更された場合のテキスト領域の動作にのみ影響することに注意してください。は表示に設定されていません (これがデフォルトです)。サイズ変更プロパティを使用するには、通常、オーバーフローをスクロールするように設定する必要があります。

以上がCSS でテキスト領域のサイズ変更を無効にしたり制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート