テキスト入力欄の枠線や背景色を装飾する

テキスト入力フォームにアイコンを加えるにはスタイルシートを使いました。 そのスタイルシートを使えば、枠線や背景色も簡単に装飾できます。

例えば、次のスタイルを加えます。

<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>

borderプロパティは枠線の装飾を指定するプロパティです。 上記では、線の太さを「1px」・線色を「 #cc0000(=濃い赤色)」・線種を「 solid(実線)」にしています。
background-colorプロパティは背景色を指定するプロパティ、colorプロパティは文字色を指定するプロパティです。 ここでは、背景色を「 #ffffcc(=淡い黄色)」にして、文字色を「 purple(紫色)」にしています。
font-sizeプロパティは文字サイズを指定するプロパティです。 ここでは、「100%」を指定しているので、本文の文字サイズと同じ大きさになります。

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

なお、過度に装飾しすぎると「入力欄」であることが分かりにくくなってしまいますので注意して下さい。
ページデザインに合わせてほどほどの装飾にとどめておきましょう。

以下のように、アイコンを表示させただけの状態がお勧めです。

おわりに

今回は、テキスト入力フォームの内側の左端に、任意のアイコン( , , など)を表示させる方法をご紹介いたしました。
うまく活用すると、無味乾燥な入力欄を少し分かりやすく・おもしろくできるかも知れません。 ぜひ試してみて下さい。

なお、フォームの装飾やアイコンの活用方法などに関しては、以下の関連記事もぜひご参照下さい。

【関連記事】




投資未経験者限定で、オンラインインタビューを受けていただける方を募集中!
ご応募の際に事前に投資意向調査アンケートにご回答いただきます。
投資に興味がない方から興味がある方まで幅広く受け付けております。
※謝礼は10,000円になります(最大10名まで)

ご協力いただける方はこちらから回答をお願いいたします(回答期限は2021年3月1日15時まで)


※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。