コピペで簡単！CSSでinput要素をおしゃれなフローティングラベルにする

CSS

posted : 2021.02.07

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。

今回はおしゃれフォームの代名詞、フローティングラベルの作り方です。

inputにフォーカス（入力）するとラベルがにゅっと上に移動するあのデザイン（フローティングラベル）を実装したい

ちょっと前まではJSで実装しなければならなかったこの表現、実は今はCSSだけでできてしまいます。

巷では「フローティングラベル」と呼ばれているそうですね。

ところでinputはlabelで囲うか囲わないかでHTMLがちょっと変わります。

labelで囲うマークアップ

 <label>
  <input type="text" placeholder="placeholder"/>
  <span>label text</span>
</label>

labelで囲わないマークアップ

<input id="sample" type="text" placeholder="placeholder"/>
<label for="sample">label text</label>

マークアップの説明は省きますが、まあ二通りのやり方があるというわけです。

CSSに大して差異はないんですが、一応二通りのスタイリングサンプルを紹介していきます。

解説はまとめて行っていきましょう。

それでは早速。

labelで囲うマークアップの場合

See the Pen <a href="https://codepen.io/mycreatesite/pen/vYyGKxv">floating label sample wrapped by label</a> by mycreatesite (<a href="https://codepen.io/mycreatesite">@mycreatesite</a>) on <a href="https://codepen.io">CodePen</a>.

labelで囲わないマークアップの場合

See the Pen <a href="https://codepen.io/mycreatesite/pen/yLVOaep">floating label sample NOT wrapped by label</a> by mycreatesite (<a href="https://codepen.io/mycreatesite">@mycreatesite</a>) on <a href="https://codepen.io">CodePen</a>.

肝は「placeholder-shown」疑似クラス

直訳すると「プレースホルダー現れたよ」疑似クラスとなります。

読んで字のごとく、inputセレクタと組み合わせて使うと「プレースホルダーが現れているとき」の挙動をコントロールできます。

今回のサンプルではそれをさらに:not()と組み合わせて、「プレースホルダーが消えたとき」の挙動を制御しています。

その部分をざっくり具体的に説明すると、

「プレースホルダーが現れているとき」はインプット上にラベルテキストを置き、

「プレースホルダーが消えた時」にラベルテキストをtransformで上に移動させています。

そして移動する工程をtransitionでアニメーションさせればひとまず実装は完成です。

ちなみにHTML側で設定しているplaceholder属性は文字色を透明（transparent）にして見かけ上非表示にしています。

あくまで表示して動かすのはlabel、もしくはspan要素なのもポイント。

思ったよりシンプルですが、実装する際にはさらにポイントがあります。

その他ポイント①：プレースホルダー属性は必ずHTML側で設定する

これをやらないとCSS側でプレースホルダーが表示されているかどうかの判定ができないようです。

つまりHTML側でplaceholder=”XXX”を省略してしまうとコードが動かなくなるので注意。

その上で、上述したようにplaceholder属性は文字色（color）を透明（transparent）にして見かけ上非表示にしています。

その他ポイント②：疑似クラス:focusも指定するとフォーカス時にフローティングする仕様になる

何を言ってるかわからないかもしれませんが、placeholderテキストが消えるタイミングというのはフォーカスした時ではなく、フォーカスして一文字目を打ったタイミングです。

なので当然、

 &:not(:placeholder-shown) + label {
  transform: translateY(0) scale(.75);
}

だけだとinputにフォーカスした直後は何も起こりません。

それが嫌だったら、サンプルのように

 &:focus + label {
  transform: translateY(0) scale(.75);
}

とfocus時にもtransformを指定してあげましょう。

サンプルではわかりやすく別個に記述していますが、実際はセレクタをまとめて

 &:not(:placeholder-shown) + label, &:focus + label {
  transform: translateY(0) scale(.75);
}

て感じでしょうか（Sass使ってない人はごめんなさい）。

個人的にはフォーカス時にフローティングしたほうが自然だと思うので、そんな感じのサンプルコードになっています。

気になる「placeholder-shown」疑似クラスのブラウザ対応状況

なんとIE11以外は概ね対応しています。

こういう便利なプロパティは何かしらブラウザ対応状況に難があるイメージですが、意外と良好。

まあIE11は…カスなんで無視でいいでしょう苦笑

ていうか今IEは本格的にMicrosoftが利用を非推奨化している（Edgeブラウザへのリダイレクトとか）ので、急速にIE11非対応要件が増えてくる予感がしています。

一応ポリフィルもあるようですが、残念ながらjQuery依存ポリフィル。

HTML5-placeholder-polyfill（要jQuery）

個人的にはIEが急速に淘汰されていく状況下では積極的に使っていきたいプロパティでもあるのかな、という感じがしています。

まとめ

というわけで「placeholder-shown」疑似クラスを使ったフローティングラベルの作り方でした。

サンプルはカスタマイズ＆コピペしやすいように最低限の効果しかつけていませんが、応用すれば色々とチャレンジできそう。

これを機に使ってみてはいかがでしょうか。

ということで今日はこれでおしまい。