ワードプレスのtwentyElevenの上部の検索フォームはフォーカスすると伸びますよね。あれってどういうふうになっているんだろうと思い調べました。
予測はjQueryだと思ったんですが、CSSでした。CSS3なんですがすごいな。IE8以前だと対応していないのでスムーズに表示されません。
おそらくjQueryでもできそうですね。
今回はCSSなのでCSS部分をご紹介します。
意外と簡単。
ワードプレスのCSSのピンポイントで取得しました。
以下のとおりです。この２つだけです。これだけで伸びます。
スポンサーリンク
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | #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; } |
一応でもサイトも載せておきます。
