textareaのフォーカス時に下線を表示させるマテリアルデザインをCSSで実装

今流行のマテリアルデザインですが、一部実装するのに手間取ってたのでメモ。


こんなふうにフォーカスされると中心から下線が表示されるものが欲しかった。
使っているフレームワークにはinputタグのものは最初から用意されていたんだけど、textarea版のものがなくて、実装するためには、他の手段を考えるかしかなくて探しに探した。

マテリアルデザイン用のフレームワークもいくつかあってそれを使ってみるのも検討したけど、html,css,javascriptのみで完結するものが欲しかった。

すると、なんとhtmlとcssだけで作っていあるアイディアが落ちていた。
https://teratail.com/questions/59450
のコード解説

以下めちゃちょっとだけ改良。

html

css

hrタグは水平線。
transformのscaleXはx軸方向の伸縮を調整するやつ。
scaleX(0)だと0倍になる。つまり表示されない。
フォーカスされる時にscaleX(1)で、1倍になる。
アニメーションの時間は450ミリ秒。
こうやってみると結構単純だ。

「textareaのフォーカス時に下線を表示させるマテリアルデザインをCSSで実装」への2件のフィードバック

  1. いつも拝見させてもらっています。
    ブログ、、、見やすくなりましたね!

    これからも頑張ってください!
    応援しています!

    1. ありがとうございます。
      既存のテンプレートを使っているので見やすいですね!!!

コメントを残す