【ホームページ作成】テキスト入力欄の内側にアイコンを表示する

テキスト入力フォームの内側にアイコンを表示

無味乾燥なテキスト入力欄の内側を、アイコンを使って装飾してみましょう。 アイコンで機能を表現すれば、入力欄の目的を明確にする役にも立ちます。

例えば、以下のように検索機能を示すアイコン「」を表示すれば、 検索語を入力するためのテキスト入力欄であることが分かりやすくなるでしょう。

そのほか、サイト内検索用のテキスト入力欄を作るなら、そのウェブサイトのアイコン（例えば「」）を表示させても分かりやすいでしょう。

実際に入力してみると分かりますが、テキスト入力フォーム内の文字は、アイコンのある領域を避けて少し右側から表示されます。

アイコンを加えるついでに、入力フォームの枠線や背景色などもいろいろカスタマイズしてみましょう。

今回は、上記に示したサンプルのように、テキスト入力フォームの内側にアイコン（ , , など）を表示させる方法をご紹介いたします。

これらの装飾には、スタイルシートを使います。 表示させるアイコンは、GIF形式やJPEG形式などの一般的な形式の画像が何でも使えます。 好きな画像を用意して試してみて下さい。

アイコン付きテキスト入力欄の作り方へ >>