【JS無し】ボタンをクリックするとアニメーションしながら伸びる検索フォーム

ボタンをクリックすると横に伸びながら出現する検索フォームの作り方です。

以前に、2つの記事でアニメーションしながら伸びる検索フォームを解説しましたが、いずれも始めから表示されているテキストエリアをクリックすることで伸びるものでした。

CSS3のみで検索フォームに開閉するアニメーションを実装する方法

アニメーションしながら開閉する検索フォーム

今回の記事では、ボタンをクリックすることでテキストフォームが出現するような検索フォームとなります。

DEMO

HTML

ポイント

全体を囲う<div class="inner"></div>の中に、検索フォームである<form id="searchform"></form>とボタンの<a href="#" class="search-btn"><i class="fa fa-search"></i></a>があります。

CSS

* {
  box-sizing: border-box;
}

.inner {
  position: relative;
  height: 44px;
  margin: 0 auto;
  width: 44px;
}

.search-btn {
  background: #F27398;
  border-radius: 50%;
  display: inline-block;
  height: 44px;
  line-height: 44px;
  margin: 0 auto;
  position: absolute;
  top: 0;
  text-align: center;
  width: 44px;
}

.search-btn i {
  color: #fff;
  margin: 0;
}

#searchform {
  height: 44px;
  margin: 0 auto;
  position: absolute;
  top: 0;
  width: 44px;
}

input[type="text"] {
  background: #ccc;
  border: none;
  border-radius: 22px;
  color: #333;
  cursor: pointer;
  height: 44px;
  opacity: 0;
  outline: none;
  padding: 5px;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 0.7s;
  width: 44px;
  z-index: 5;
}

input[type="submit"] {
  display: none;
}

input[type="text"]:focus {
  cursor: text;
  opacity: 1;
  width: 300px;
}

ポイント

ボタンとテキストエリアを同じサイズと形にしています。更に、透明にしたテキストエリアを、ボタンより上の階層に絶対配置することで、いかにもボタンがクリックできるように見せています。

input[type="text"] {
  background: #ccc;
  border: none;
  border-radius: 22px;
  color: #333;
  cursor: pointer;
  height: 44px;
  opacity: 0;
  outline: none;
  padding: 5px;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 0.7s;
  width: 44px;
  z-index: 5;
}

submitは今回は使用しないので、非表示にしています。

input[type="submit"] {
  display: none;
}

ボタンがクリック（実際にはテキストエリアがフォーカス）されると、テキストエリアが横に伸びます。

input[type="text"]:focus {
  cursor: text;
  opacity: 1;
  width: 300px;
}

以上で、HTML＋CSSで、ボタンをクリックするとアニメーションしながら伸びる検索フォームを終わります。