テキスト入力欄の内側にアイコンを表示する(3ページ目)

3. アイコンの表示を1つだけにする

背景画像として指定したアイコン画像を、タイル状に並べずに1つだけ表示させるには、以下のようにスタイルを追加します。

background-repeatプロパティは、背景画像の繰り返し方法を指定するプロパティです。 この値に「 no-repeat 」を指定すると、繰り返さずに1つだけ表示するようになります。

実際に表示させると、以下のように見えます。

これで、アイコン画像が1回だけ表示されるようになりました。
このままでも良さそうですが、アイコン画像の高さよりも入力欄の高さの方が高い場合に、アイコンが上端に寄って見えます。

そこで、アイコンが上下方向の中央に表示されるようにスタイルを追加します。

background-positionプロパティは、背景画像の表示位置を指定するプロパティです。値を2つ指定すると、最初が「左右方向」で次が「上下方向」の位置を指定することになります。 上記では「 2px center 」と指定しているので、「左から2ピクセル・上下方向の中央」に表示されます。

上記のスタイルシートで実際に表示させると、以下のように見えます。

大きい入力欄でも、アイコンが（上下方向の）中央に寄って表示されていることが分かります。

さて、このままでは、テキスト入力欄に入力した内容が、アイコンに重なって表示されてしまいます。（アイコンは「背景」として表示されているので、そのままでは文字が上に重なってしまいます。）
最後に、入力内容がアイコンを避けるように指定しましょう。

入力内容とアイコンが重ならないようにする方法へ >>