背景の装飾方法
過去の記事「背景画像の表示方法を自在に指定」でも解説していますが、スタイルシートの background-imageプロパティを用いれば、様々な要素に背景画像を加えることができます。フォームの入力欄も対象です。
同様に、background-colorプロパティを用いれば、背景色を加えることができます。
■フォームへの背景色の指定
まずは、名前とメールアドレスの入力欄に背景色を加えてみましょう。スタイルシートの background-colorプロパティを用いて値「 #ffffcc 」を指定します。
スタイルシートは、
background-color: #ffffcc;
と記述します。
※「#ffffcc」の部分は色の指定です。ここでは16進数で「淡い黄色」を指定しています。他にも、「skublue」など色名での指定も可能です。
これを、名前欄を作っているinput要素に加えると、（style属性を使って）
<input type="text" name="name" style="background-color: #ffffcc;">
と記述することになります。
■フォームへの背景画像の指定
次に、メッセージ入力欄に背景画像を加えてみましょう。スタイルシートの background-imageプロパティを用いて、画像ファイル「mail.jpg」を指定しています。
スタイルシートは、
background-image: url('mail.jpg');
と記述します。
※style属性を用いて記述することを考えて、ファイル名はダブルクオーテーションではなく、シングルクオーテーションで囲んでいます。（style属性を用いない場合でもシングルクオーテーションで囲んで問題ありませんので、常にシングルクオーテーションで囲むようにしておいても良いでしょう。）
これを、メッセージ入力欄を作っているtextarea要素に加えると
<textarea col="40" row="5" style="background-image: url('mail.jpg');"></textarea>
となります。
これで、背景の装飾はできあがりです。
次に、入力される文字を装飾してみましょう。
