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は
内容に応じてサイズが可変する <textarea> を素敵に実装する - Qiita
概要 内容に応じてサイズが可変する textarea を、できるだけ手間をかけず、スマートな実装を試みます。 しかも、ネイティブのフォームが持っている利点をそのまま活かして、堅牢でアクセシブルな設計を目指します。 標準 textarea の難点 HTML の textarea 要素は基本的に高さが固定されていて使い勝手が悪いです。３行分くらいしか領域がなくて、長い文章を打つのがとにかく苦痛なんていうこともザラです。 最近のブラウザ実装では、多少気を利かせてくれているのか、テキストエリアの領域をドラッグで拡大・縮小できます。 ただ私は思うのです。めんどくさいし、最初っから、入力するテキスト量に応じて自動的に伸び縮みしてくれればいいのに……と。スクロールバーなんて、１ページにひとつあればじゅうぶんなんですよ。 実装方法 難しいことはありませんが、HTML と CSS、JS が協調して動作します
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
