【HTML/CSS】Searchバーのアニメーション

ブログを作ってるんですが、検索バーをつけようと思い、少しアニメーションをつけてみました。
CSSでの実装となります。

1.検索バーをクリックするとバー自体の範囲が伸びる
2.placeholderで表示している文字をクリックした時に消す

今後も使いそうなので、備忘録として残しておきます。

クリックでバーの範囲を伸ばす

とっても簡単でした。

HTML

<input class="search" type="text" placeholder="Search">

CSS

.search{
  width:100px;
}
.search:focus{
  width: 120px;
}

これでクリックされた後に横幅が広がります。
イメージとしてはクリック(focus)されたとどういう形にしたいかを設定するということですね。
ちなみにtransitionなどを設定すると時間をかけて広がるので、モダンな感じがします笑

placeholderの文字を消す

これも簡単でした。
CSS

.search:focus::placeholder{
  color: transparent;
}

これでクリック(focus)した時に消えてくれます。
class名:focus{} これは結構使えそうだなと思いました。
JavaScriptで実装するんだろうなと思ってたら、CSSで簡単にできたので、参考になる方がいれば幸いです。