CSSベースでテキストボックスにフォーカスされるフォームを作成しました

CSSベースでテキストボックスにフォーカスされるフォームを作成しました。
デモページはコチラから
フォームのレイアウトはdlで形成しています。

CSS


.tb-focus {
border:1px solid #888377;
}

.tb-focus:focus {
background-color:#EBDDC4;
}

select, textarea {
border:1px solid #888377;
}

textarea:focus {
background-color:#EBDDC4;
}

XHTML


<form id="form" action="" method="post">
<dl>
<dt><label for="name">お名前:</label></dt>
<dd><input id="name" class="tb-focus" type="text" size="30" value="" name="お名前" /></dd>

<dt><label for="kana">フリガナ:</label></dt>
<dd><input id="kana" class="tb-focus" type="text" size="30" value="" name="フリガナ" /></dd>
<dt><label for="email">メールアドレス:</label></dt>
<dd><input id="email" class="tb-focus" type="text" size="50" value="" name="メールアドレス" /></dd>
<dt><label for="subject">お問い合わせの内容:</label></dt>
<dd><select id="subject" name="お問い合わせの内容">
<option  selected="selected" value="問い合わせ内容1">問い合わせ内容1</option>
<option value="問い合わせ内容2">問い合わせ内容2</option>
<option value="問い合わせ内容3">問い合わせ内容3</option>
<option value="問い合わせ内容4">問い合わせ内容4</option>
<option value="問い合わせ内容5">問い合わせ内容5</option>
</select></dd>
<dt><label for="detail">お問い合わせの詳細:</label></dt>
<dd><textarea id="detail" onfocus="this" name="お問い合わせの詳細" rows="8" cols="50"></textarea></dd>
</dl>
<input class="push" type="submit" value="送信" name="submit" />
</form>

ユーザビリティ的には良いフォームになっていると思います。