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

要实现文本框获得焦点时颜色改变,失去焦点时还原默认的样式可以使用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");
            });

  

posted @   怎么收获,怎么载  阅读(907)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示