4. 入力内容がアイコンに重ならないようにする
テキスト入力欄に入力した内容とアイコン画像が重ならないようにするには、以下のスタイルを加えます。
<style type="text/css">
input.withicon {
background-image: url("sicon16.gif");
background-repeat: no-repeat;
background-position: 2px center;
padding-left: 21px;
}
</style>
input.withicon {
background-image: url("sicon16.gif");
background-repeat: no-repeat;
background-position: 2px center;
padding-left: 21px;
}
</style>
padding-leftプロパティは、左側の内側の余白を指定するプロパティです。ここに値「 21px 」を指定しているので、テキスト入力欄の内側の左に21ピクセル分の余白が確保されます。 その結果、入力した文字列がアイコンと重ならなくなります。（数値は、実際に表示させるアイコンの大きさを考慮して指定して下さい。）
実際に表示させると、以下のように見えます。
文字を入力してみると、アイコンを避けて表示されることが分かります。
以上で完成です。
必要に応じてボタンなどを表示させれば、検索フォームらしく見えるでしょう。
さて、せっかくなのでテキスト入力欄の枠線や背景色も装飾してみましょう。
