デザインサンプルで学ぶCSSによるスタイリング～「フォーム（検索ボックス）」編

CSSで作るWeb用パーツ（5）

フォーカス時に幅が広がる検索ボックス

　最後のサンプルは、角丸で虫眼鏡アイコンとヒントテキストがあるデザインです。

図9　フォーカス時に幅が広がる検索ボックス（sample03.html）

　フォーカス時には、ボックス幅が広がりピンクの光彩が出ます。

図10　フォーカス時、ホバー時のスタイル（sample02.html）

HTML5でマークアップ

　今回はボタンがないので、さらにシンプルなコードになっていますが、HTML5で追加されたplaceholder属性を使っています。プレースホルダーとは、フォームの入力欄の中に表示される入力に関するヒントを示したテキストです。

リスト11　フラットデザインの検索ボックス／HTML（sample01.html）

<form>
<input type="search" placeholder="キーワード検索">
</form>

デフォルト時のスタイリング

　まずはデフォルト時のスタイルを設定しましょう。幅は200px、1pxのグレーのボーダー、半径20pxの角丸を指定します。

　さらに、背景色をグレー、背景画像として虫眼鏡アイコンを左から10px、高さの真ん中に繰り返さずに表示するよう指定しています。アイコンの表示領域を確保するため、左パディングには40pxを指定しました。

　アニメーションの指定はCSS3のtransitionプロパティを使っています。これはCSSプロパティが変化する際のアニメーション効果をまとめて指定できるプロパティで、transition-property、transition-duration（変化の時間）、transition-timing-function（変化のタイミング）、transition-delay（変化がいつ始まるか）の各プロパティの値を、この順に半角スペースで区切って一括で指定できます。この例では、transition-propertyとtransition-propertyのみ、全プロパティが0.5秒かけて変化するよう指定しています。

リスト12　デフォルト時のスタイリング／CSS（sample03.html）

input[type="search"] {
  box-sizing: content-box;
  padding-left: 40px; /* アイコンの表示領域のためのパディング */
  height: 38px;
  width: 200px;
  border-radius: 20px;
  border: 1px solid #ccc;
  background: #eee url('search03.png') 10px center no-repeat;
  transition: all 0.5s; /* アニメーションの指定：全プロパティ、0.5秒かけて変化 */
}

フォーカス時のスタイリング

　フォーカス時は、幅500px、背景色は白、ボーダーはピンクになるよう指定しました。ピンク系の光彩は、box-shadowプロパティで指定しています。

リスト13　フォーカス時のスタイリング／CSS（sample03.html）

input[type="search"]:focus {
  width: 500px;
  background-color: #ffffff;
  border-color: #ff00cc;
  box-shadow: 0 0 5px 0 #cc6699;
}

プレースホルダーのスタイル

　執筆時点では、プレースホルダーをスタイルの適用対象とするには、ブラウザごとにベンダープレフィックスが必要です。CSS3から擬似要素はコロンが2つになりましたが、IEではコロンが1つ、またplaceholderとinput-placeholderの2種類の書式があるので注意しましょう。

プレースホルダーのベンダープレフィックスと書式

ベンダープレフィックス付き書式	対象ブラウザ
::-webkit-input-placeholder	Webkit系ブラウザ（Chrome、Safari）I
::-moz-placeholder	Firefox 19+
:-ms-input-placeholder	Internet Explorer 10+

　サンプルでは、次のように文字色がグレーになるよう統一しました。

リスト14　Firefoxのボーダーとパディングをリセット

::-webkit-input-placeholder { /* Chrome, Safari */
  color: #666666;
}
::-moz-placeholder { /* Firefox */
  color: #666666;
}
:-ms-input-placeholder { /* IE */
  color: #666666;
}

まとめ

　本記事では、検索ボックスのスタイリング例を3つ紹介しました。フォームはブラウザごとのデフォルトスタイルにばらつきがありますが、入力欄やボタン、プレースホルダーなどをスタイリングする際もブラウザごとの対処法を覚えておくと便利です。次回は、フォーム部品のラジオボタンやチェックボックスのスタイリング方法をご紹介します。