img
白 クリーム 黄色 淡い緑 水色 淡い青紫 淡いグレー グレー 黒 茶 赤 濃いピンク ピンク

テキストボックスの装飾


テキストボックスを装飾する

  ie6 nn7 op8

スタイルを指定すると、テキストエリアと同様にテキストボックスを装飾することができます。

■ テキストボックス枠のスタイル

テキストボックスにスタイルを追加すると枠線を装飾することができます。
<input type="text" size="長さ" style="border:線の種類 線の幅 線の色;" value="ボックスに表示する文字">

例: 
例: <input type="text" size="50" style="border:solid 1px #6666ff;" value="ボックスに表示する文字">



■ テキストボックス枠と中のスタイル ie6 nn7 op8

<input type="text" size="長さ" style="border:線の種類 線の幅 線の色;background-color:背景色;" value="ボックスに表示する文字">

例: 
例: <input type="text" size="50" style="border:dotted 2px #6666ff;background-color:#ccccff;" value="ボックスに表示する文字">



■ テキストボックスに背景画像を付ける ie6 nn7 op8

<input type="text" size="長さ" style="style="border:線の種類 線の幅 線の色;background-image:url(画像のアドレス);" value="ボックスに表示する文字">

例: 
例: <input type="text" size="50" style="border:solid 1px #66ccff;background-image:url(******.gif);" value="ボックスに表示する文字">



■ テキストボックスの任意の場所に画像を付ける ie6 nn7 op8

style="border:線の種類 線の幅 線の色;background-color:背景色;
background-image:url(画像のアドレス);background-repeat:repeat-y;background-position:left;" value="ボックスに表示する文字">


例: 
例: <input type="text" size="50" style="border:dotted 2px #ff9999;background-color:#ffffff; background-image:url(******.gif);
background-repeat:repeat-y;background-position:left;" value="ボックスに表示する文字">


例:  background-position:right; に変更

例:  background-position:center; に変更

上記のタグでは background-repeat:repeat-y になっているので、画像は縦に連続されていますが、
background-repeat:no-repeat で画像が一つだけ固定されます。
font-size:数値pt; color:色名; を追加することによって文字のサイズや文字色が変更できます。

 background-repeat:repeat-y;font-size:18pt;
 background-repeat:no-repeat;font-size:18pt;color:#6666ff

テキストボックスを透過(背景を見えるように)する方法は その他の小技→透過部品 を参照して下さい。