フォームでスタイルの適応

フォームの文字サイズと色を指定する

<input type="text" style="font-size: ★;color: ☆">
<select style="font-size: ★;color: ☆">〜</select>
<textarea style="font-size: ★;color: ☆">〜</textarea>

★=文字サイズ
pt(ポイント),pc(パイカ),px(ピクセル),%(基本サイズに対する%)
☆=カラー名または#カラーコード

フォームに背景色をつけよう

<input type="text" style="background-color: ★">
<select style="background-color: ★">〜</select>
<textarea style="background-color: ★">〜</textarea>

★=カラー名または#カラーコード
ソースサンプル
<html>
<head>
<title>タグであそぼう!</title>
</head>
<body>
<form action="mailto:あなたのメールアドレス" method="post">
<p>お名前:
<input type="text" style="font-size: 14pt;color: blue;background-color:Khaki" name="name" value="お名前をどうぞ" size="30"><br>
メールアドレス:
<input type="text" style="font-size: 14pt;color: blue;background-color:Khaki" name="mail" value="メールアドレス" size="30"><br>
URL:
<input type="text" style="font-size: 14pt;color: blue;background-color:Khaki" name="urll" value="ホームページ" size="40"><br>
</p>
<select style="font-size: 10pt;color: blue;background-color:Khaki" name="adres">

<option value="関東" selected>関東
<option value="北海道">北海道
<option value="東北">東北
<option value="東海">東海
<option value="関西">関西
<option value="中国、四国">中国、四国
<option value="九州、沖縄">九州、沖縄
</select> </form>
</body>
</html>
ソースサンプル

お名前:
メールアドレス:
URL:


オンマウスで背景色変更

お名前:
メールアドレス:
URL:


タグ使用例(改行をしないで記述して下さい)
<input type="text" style="font-size: 14pt;color: blue;background-color:Khaki" name="name" value="お名前をどうぞ" size="30"
onmouseover="this.style.backgroundColor='#00fa9a'" onmouseout="this.style.backgroundColor='Khaki'">

フォーム選択で背景色変更

お名前:
メールアドレス:
URL:


フォーカスイベントonFocus=選択されたonBlur=選択が外れたを使います
上記オンマウスで背景色変更のタグonmouseover,onmouseoutそれぞれを
onFocus,onBlurに変更して下さい

フォーム外枠色,枠の幅変更


<input type="text" style="border-color:★; border-width:☆">
★=カラー名または#カラーコード
☆=外枠幅

フォームに背景画像を使おう

<textarea style="background-image: url(★)">〜</textarea>
★=使用する画像ファイル名

フォームでの入力モード切替

<input type="text" style="ime-mode: ★">だけの機能です
★=キーワード(auto,active,inactive,disabled)
キーワード入力モード
auto自動切換え
active日本語入力モード
inactive英語入力モード
disabled日本語入力への切り替えが出来ません


フォーム選択で枠表示

<input type="text" style="border:2px #FFCC00 solid" onfocus="this.style.borderColor='#000099'" onblur="this.style.borderColor='#FFCC00'">
#FFCC00,#000099はお好みのカラーに変更して下さい


フォーム背景色を透過色にする


<input type="text" size="40" style="border:3px #FFCC00 solid; background-color: transparent;">

セレクトメニューごとの色分け



<option>都道府県を選んで下さい</option>
<option style="background-color: #0099FF;">北海道</option>
<option style="background-color: #CC3366;">東北</option>
<option style="background-color: #FF9966;">関東</option>

background: # はカラー名または#カラーコードで変更可能です

ラジオボタンに背景色

<input type="radio" name="test" value="test1" checked style="background-color: #66FF66;">
<input type="radio" name="test" value="test2" style="background-color: #FFFF66">
<input type="radio" name="test" value="test3" style="background-color: #99FFFF">
<input type="radio" name="test" value="test4" style="background-color: #CC6666">
<input type="radio" name="test" value="test5" style="background-color: #FF33CC">

background: # はカラー名または#カラーコードで変更可能です
name属性(name=test)value=test1(値)は
それぞれ使用するフォームに合わせ変更して下さい

テキストエリアのスクロールバー非表示

<textarea style="overflow-y: hidden;">エリア内文字</textarea>
overflow-xで横スクロールバーの非表示が可能です