获取或失去焦点时改变文本框样式
要实现文本框获得焦点时颜色改变,失去焦点时还原默认的样式可以使用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" ); }); |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步