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