テキスト入力欄の枠線や背景色を装飾する
テキスト入力フォームにアイコンを加えるにはスタイルシートを使いました。 そのスタイルシートを使えば、枠線や背景色も簡単に装飾できます。
例えば、次のスタイルを加えます。
<style type="text/css">
input.withicon {
background-image: url("sicon16.gif");
background-repeat: no-repeat;
background-position: 2px center;
padding-left: 21px;
border: 1px #cc0000 solid;
background-color: #ffffcc;
color: purple;
font-size: 100%;
}
</style>
input.withicon {
background-image: url("sicon16.gif");
background-repeat: no-repeat;
background-position: 2px center;
padding-left: 21px;
border: 1px #cc0000 solid;
background-color: #ffffcc;
color: purple;
font-size: 100%;
}
</style>
borderプロパティは枠線の装飾を指定するプロパティです。 上記では、線の太さを「1px」・線色を「 #cc0000（＝濃い赤色）」・線種を「 solid（実線）」にしています。
background-colorプロパティは背景色を指定するプロパティ、colorプロパティは文字色を指定するプロパティです。 ここでは、背景色を「 #ffffcc（＝淡い黄色）」にして、文字色を「 purple（紫色）」にしています。
font-sizeプロパティは文字サイズを指定するプロパティです。 ここでは、「100%」を指定しているので、本文の文字サイズと同じ大きさになります。
実際に表示させると、以下のように見えます。
なお、過度に装飾しすぎると「入力欄」であることが分かりにくくなってしまいますので注意して下さい。
ページデザインに合わせてほどほどの装飾にとどめておきましょう。
以下のように、アイコンを表示させただけの状態がお勧めです。
おわりに
今回は、テキスト入力フォームの内側の左端に、任意のアイコン（ 
, 
, 
など）を表示させる方法をご紹介いたしました。
うまく活用すると、無味乾燥な入力欄を少し分かりやすく・おもしろくできるかも知れません。 ぜひ試してみて下さい。
なお、フォームの装飾やアイコンの活用方法などに関しては、以下の関連記事もぜひご参照下さい。
【関連記事】
