获取或失去焦点时改变文本框样式

要实现文本框获得焦点时颜色改变，失去焦点时还原默认的样式可以使用CSS的伪类选择器来实现。

CSS代码如下：

  /*CSS伪代码*/
        input:focus, textarea:focus {
            border:1px solid #f00;
            background:#fcc;
        }

HTML代码如下　　

<fieldset>
            <legend>个人基本信息</legend>
            <div>
                <label for="username">名称：</label>
                <input id="username" type="text"/>
            </div>
                <div>
                <label for="pass">密码：</label>
                <input id="pass" type="text"/>
            </div>
                <div>
                    
                <label for="username">名称：</label>
                <input id="Text2" type="password"/>
            </div>
                <div>
                <label for="msg">详细信息：</label>
               <textarea id="msg"></textarea>
            </div>
            <div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </div>
        </fieldset>

　至此可以实现获得焦点时改变文本框颜色，但是IE6不支持除超链接之外的:hover伪类选择符，此时可以用Jquery来弥补IE6的不足：

首先在CSS中添加一个类名为focus的样式

     .focus {
                border:1px solid #f00;
            background:#fcc;
        }

　　然后为文本框添加获取和失去焦点事件

    //在$(function)中为文本框添加样式
                $(":input").focus(function () {
                    $(this).addClass("focus");
                }).blur(function () {
                    $(this).removeClass("focus");
                });