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

テキスト領域のサイズ変更の無効化

Web 開発の領域では、テキスト領域のサイズ変更動作を制御することが望ましいことがよくあります。デフォルトでは、テキストエリアの右下隅をドラッグすることでサイズを変更でき、ユーザーはその寸法を調整できます。ただし、この機能が必要でない、または望ましくない状況もあります。

テキスト領域のサイズ変更プロパティを無効にするには、CSS の機能を利用できます。次のルールは、テキスト領域のサイズ変更を効果的に防止します:

textarea {
  resize: none;
}

このルールは、ドキュメント内のすべてのテキスト領域に適用されます。ただし、特定のテキストエリアのサイズ変更のみを無効にしたい場合は、クラスまたは属性セレクターを利用できます。

たとえば、クラス "textarea1" のテキストエリアのサイズ変更を無効にするには:

.textarea1 {
  resize: none;
}

または、次の名前の特定のテキストエリアのサイズ変更を無効にするには"foo":

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

または、ID 属性を使用したい場合:

#foo {
  resize: none;
}

W3C 仕様には、「both」、「水平」と「垂直」です。これにより、調整できる寸法 (幅または高さ) を指定できます。

textarea {
  resize: vertical; /* Resize vertically, fixed width */
}

「resize」プロパティは、「overflow」プロパティが値に設定されている場合にのみ有効であることに注意することが重要です。 「見える」以外。したがって、サイズ変更を有効にするには、テキスト領域の「オーバーフロー」プロパティが「スクロール」または別の適切な値に設定されていることを確認してください。

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