2018年06月19日(火)
CSSの便利なセレクタ「:placeholder-shown疑似クラス」を使うと、フローティングラベルも簡単に実装できる
フローティングラベルとは、フォームのラベルが入力時にアニメーションで上方向にフローティングするテクニックです。
一昔前までは、完全にJavaScriptの範疇、もしくは強引なCSSでもたつく感じのアニメーションでしか実装できませんでした。しかし、:placeholder-shown疑似クラスを使用すると、シンプルなコードで滑らかなフローティングラベルを実装できます。
下記のデモはJavaScriptは無し、CSSのみで実装されています。
![]()
input :not(:placeholder-shown)
フローティングラベルの挙動は、フォーカスがはずれている時は入力欄に表示され、フォーカスがあたった時は入力欄の上に表示されます。
![]()
author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV[ユーザー投稿] 【増席!】忙しいWeb担当者のための「Google Analytics活用&データ分析」時短テクニックセミナー
NEXT ›![]()
フロントエンドのコーダーの頭の中、デザインを見た時にどんなことを考えるのか
関連記事
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『CSSの便利なセレクタ「:placeholder-shown疑似クラス」を使うと、フローティングラベルも簡単に実装できる』についてまとめています。
この記事は特にjavascript・アニメーション・SEO・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。