:focus / :actionを使った魅力的な入力フォーム実装サンプル(ZIP付)
どーも中野区でホームページの作成やってます。＠PNRAです！
今日は入力ボックスをちょっとお洒落に変えてみる小技を紹介したいと思います。
input要素にフォーカスをあてた際のデザイン変更のTipsです。
placeholderの文字色を変更してみる
プレースホルダーとは、フォーム内にサンプルテキストを表示させる機能で、inputタグの中に「 placeholder=““ 」で入力することで表示させられます。
このプレースホルダーの文字、デフォルトではグレー（#999999）なのですが、ホームページのデザイン上ちょっと変えたいということもあるかと思います。そんな時は以下の記述をCSS内に加えてあげましょう。
/*inputに適用させる*/
input::-webkit-input-placeholder, input:-moz-placeholder {
color: #000;
}
/*input、textareaに適用させる*/
::-webkit-input-placeholder, :-moz-placeholder {
color: #000;
}
たったこれだけの記述ですが、以外と知らない方も多いと思うので是非覚えておいて下さい。
次にフォームにクリックした際のアクションを設定したいと思います。
:focus、:actionを使った印象的な入力フォームを作る
フォームクリック時のアクションは:focus、:actionをinputタグに加えて指示をしてあげましょう。
以下にサンプルを用意しておいたので、クリックして試してみてください。
:focus & :active effect sample
用意したサンプルはそれぞれ
focus01：フォーカス時に太線表示
focus02：フォーカス時に背景色の追加
focus03：フォーカス時に拡大バウンズ
focus04：フォーカス時に縮小バウンズ
focus05：フォーカス時にエリア拡大
小さなことではありますが、こうした小さなところにギミックを設けるだけでも、ちょっとした面白さをサイトに付与することができますよね。
今回サンプルとして用意したデータは、下記のボタンからダウンロードできるので、是非ダウンロードして、いじくってみてください♡
Siyabonga ekufundeni kwakho.(訳：最後まで読んでくれてありがとう。 / 注：ズールー語)
