文本框获得焦点时改变背景颜色

本文介绍了如何使用CSS和jQuery实现文本框或文本域获得焦点时背景颜色和边框的变化,并在失去焦点时恢复原始状态的方法。该技术可以提高用户体验,为用户提供即时反馈。文中详细解释了兼容低版本IE浏览器的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文本框或者文本域获得焦点时改变背景颜色和边框.时区焦点时还原最初状态.这样做可以极大地提高用户体验,使用户的操作可以可到及时的反馈.

我先是想到使用CSS实现,

input:focus,textarea:focus{
    border:1px solid #f99;
    background-color:navajowhite;
}

貌似实现了,经过测试:发现低版本的IE不支持.我比较喜欢做IE兼容,就是查了很多资料.

发现IE6并不支持除了超链接元素(hover)之外的伪类选择器.

于是想到可以使用jQuery的focus来试试,

1 $(":input").focus(function () {
2     $(this).addClass("focus");
3 }).blur(function () {
4     $(this).removeClass("focus");
5 });

在低版本IE测试可以运行.

转载于:https://www.cnblogs.com/liubeimeng/p/5893313.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值