CSS のフィールド サイズ設定 | Chrome for Developers
field-sizing を使用せずに適切なサイズの入力フィールドを作成するには、テキスト フィールドの入力の平均サイズを推測するか、JavaScript を使用して文字数をカウントし、ユーザーが入力したテキストに合わせて要素の高さまたは幅を増やす必要がありました。つまり、ユーザーが入力したコンテンツをたどろうとすると、簡単ではなく、エラーが発生しやすくなっていました。 field-sizing では、コンテンツに基づくサイズ設定を有効にするために 1 行の CSS が必要です。このコンテンツ ベースのサイズ設定スタイルは、テキスト領域以外でも有効です。 textarea, select, input { field-sizing: content; } クイックリンク 仕様 | 説明 ショート動画が好き？ Wes Bos と Jhey がそれぞれ field-sizing を紹介する素晴
CSSの新しいプロパティ「field-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更
今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-heightやmax-heightを同時に設定できるので、上限下限のサイズを設定することもできます。 CSSの新しいプロパティはfield-sizingです。field-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。 参考: Feature: field-sizing CSS property CSSは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
