アイコン付きテキスト入力フォームを作る
それでは、アイコンを内側に表示させたテキスト入力欄を作ってみましょう。
手順は下記の通りです。
- テキスト入力欄をHTMLで作る
- アイコンを表示させる
- アイコンの表示を1つだけにする
- 入力内容がアイコンに重ならないようにする
表示させたいアイコン画像を用意してから、順番に操作してみて下さい。
アイコン画像は、GIF・PNG・JPEGなど、ブラウザ上で表示できる画像なら何でも構いません。 大きさもどんなサイズでも構いません。（この記事で使用しているサンプル画像は、16×16ピクセルで作成しています。）
1. テキスト入力欄をHTMLで作る
まずは、テキスト入力欄をHTMLで作ります。 これは何も難しくありません。ただ、以下のようにinput要素を使って記述します。
<input type="text" class="withicon">
実際に表示させると、以下のように見えます。
スタイルシートで装飾できるよう、class属性を使って「 withicon 」というクラス名を指定しています。 （そのほか、name属性やvalue属性など、必要な属性を付加して使って下さい。）
2. アイコンを表示させる
テキスト入力欄の内部にアイコンを表示させるには、アイコンを背景画像として指定します。 テキスト入力欄に背景画像を指定するには、以下のようにスタイルシートを記述します。
<style type="text/css">
input.withicon {
background-image: url("sicon16.gif");
}
</style>
input.withicon {
background-image: url("sicon16.gif");
}
</style>
上記のスタイルシートでは、背景画像を指定するbackground-imageプロパティを使って、「 sicon16.gif 」というファイル名の画像をテキスト入力欄の内側に表示させています。
実際に表示させると、以下のように見えます。
テキスト入力フォーム全体に、アイコン「
」が表示されます。
背景画像は、何も指定しなければ領域全体にタイル状に並べて配置されるため、このような表示になります。
このままでは困りますので、アイコン（背景画像）を1つだけ表示するように指定を加えましょう。
