新フォームテクニック

HTML CSS

5月26日に、入力フォームにマウスをフォーカスさせると、背景の色が変わるように設定することについて記事を書きました。

今回は入力フォームにカーソルを重ねると、色が変わるように設定してみます。
:hoverセレクタを利用することによって色が変わります。

HTMLファイルのほうは、下記の通りに入力します。


<!DOCTYPE html>
<html lang="ja">
<head>
　　　　<meta charset="UTF-8">
　　　　<link rel="stylesheet" type="text/css" href="style.css">
　　　　<title>新フォームテクニック</title>
</head>
<body>
<form method="post" action="#" id="myform">
<p>
　　　　<label>名前</label>
　　　　<input type="text" name="example1" id="example1" />
</p>
<p>
　　　　<label>メールアドレス</label>
　　　　<input type="text" name="example2" id="example2" />
</p>
<p>
　　　　<label>コメント</label>
　　　　<textarea name="example3" id="example3" cols="40" rows="8"></textarea>
</p>
<p>
　　　　<input type="submit" value="送信" id="submit" />
　　　　<input type="reset" value="リセット" id="reset" />
</p>
</form>
</body>
</html>
CSSファイルのほうは、下記の通りに入力します。

@charset "UTF-8";

#myform label{
　　　　display:block;
　　　　width:100px;
　　　　float:left;
　　　　font-size:0.875em;
}
input,textarea{
　　　　background-color:#eeeeee;
　　　　border:1px solid #000000;
}
input#example1:hover{
　　　　background-color:#b0c4de;
}
input#example1:focus{
　　　　background-color:#ffffff;
}
input#example2:hover{
　　　　background-color:#b0c4de;
}
input#example2:focus{
　　　　background-color:#ffffff;
}
textarea#example3:hover{
　　　　background-color:#b0c4de;
}
textarea#example3:focus{
　　　　background-color:#ffffff;
}

これで入力フォームにカーソルを重ねると、色が変わります！
あんまり使い道がないかもしれませんが、一応参考までに。
ちなみに:hoverセレクタの指定はIE6以下が、:focusセレクタの指定はIE7以下が未対応になっています。

今回は複数の入力フォームを追加してます。
項目名を揃える為にdisplay、width、floatプロパティを使ってます。
ついでに送信、リセットボタンも追加しました。

完成見本はこちら
http://www6.ocn.ne.jp/~yokotchi/blog/sample02/index.html