フォームテクニック

HTML CSS

入力フォームにマウスをフォーカスさせると、背景の色が変わるように設定してみましょう(。・ω・。)ﾉ
HTMLファイルのほうは、下記の通りに入力します。


<!DOCTYPE html>
<html lang="ja">
<head>
　　　　<meta charset="UTF-8">
　　　　<link rel="stylesheet" type="text/css" href="style.css">
　　　　<title>フォームテクニック</title>
</head>
<body>
<p>名前：<input type="text" name="example"></p>
</body>
</html>
CSSファイルのほうは、下記の通りに入力します。

@charset "UTF-8";

input{
　　　　background-color:#eeeeee;
　　　　border:1px solid #000000;
}
input:focus{
　　　　background-color:#ffffff;
}

これで入力フォームにマウスをフォーカスさせると、灰色から白色に背景の色が変わります！
このテクニックを使うことによって、ユーザーがどこの入力フォームに書き込みをしているのか一目で分かるようになるので、フォームを使う機会がある時は便利かも。