100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 获取或失去焦点时改变文本框样式

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

时间:2021-05-16 23:42:03

相关推荐

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。