CSS の新しいプロパティ フィールド サイズにより、入力、テキストエリア、選択をコンテンツに適応させることができます

フィールドサイジングの紹介

field-sizing は、入力、テキストエリア、選択をコンテンツのサイズに合わせて自動的に拡大縮小できるようにする新しい CSS プロパティです。

• fix は、入力、テキスト領域、選択範囲の現在の動作で、内容に関係なく固定サイズになります。
• content 、フォーム要素がコンテンツのサイズに合わせて拡大縮小されます

入力または選択に適用すると、コンテンツの幅に合わせて拡大縮小されます。これをテキストエリアに適用すると、コンテンツの高さに合わせて拡大縮小されます。

例

<input
  type="text"
  placeholder="input"
  value="this sizes to its content"
/>

<style>input {
  field-sizing: content;
}
</style>

<textarea>
Here is a
Multiline
Textarea
</textarea>


<style>
 textarea {
  field-sizing: content;
  width: 200px;
}
</style>

注意事項

• これは CSS 基本ユーザー インターフェイス モジュール レベル 4 の一部であり、まだエディターのドラフト状態にあり (つまり、変更される可能性があり、変更される可能性があります)、現在は Chromium 専用の機能です。ただし、今年のある時点で他のブラウザにも導入されると予想しており、Safari はすでに肯定的なシグナルを発しており、Firefox も追随する可能性があります。
• ブラウザーがサポートされていないことに加えて、入力、選択、またはテキストエリアに境界があることを確認する必要もあります。そうしないと、成長し続けるだけです。これを行うには、要素
に max-width または max-height を設定します。
• 同様に、スペースやポイントの幅まで縮小したくない場合は、入力と選択範囲に min-width を追加します。

以上がCSS の新しいプロパティ フィールド サイズにより、入力、テキストエリア、選択をコンテンツに適応させることができますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。