ワードプレスのtwentyElevenの上部の検索フォームはフォーカスすると伸びますよね。あれってどういうふうになっているんだろうと思い調べました。
予測はjQueryだと思ったんですが、CSSでした。CSS3なんですがすごいな。IE8以前だと対応していないのでスムーズに表示されません。
おそらくjQueryでもできそうですね。
今回はCSSなのでCSS部分をご紹介します。
意外と簡単。
ワードプレスのCSSのピンポイントで取得しました。
以下のとおりです。この２つだけです。これだけで伸びます。
スポンサーリンク
#search {
-webkit-transition-duration: 400ms;
-webkit-transition-property: width, background;
-webkit-transition-timing-function: ease;
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
-o-transition-duration: 400ms;
-o-transition-property: width, background;
-o-transition-timing-function: ease;
width: 72px;
}
#search:focus {
background-color: #f9f9f9;
width: 196px;
}
一応でもサイトも載せておきます。