Php文档 Php问答行业资讯 Php论坛 Php手册 Php博客

游戏榜单

软件榜单

关闭导航

热搜榜

热门下载

热门标签

php爱好者> php文档>文本框(input)获取焦点(onfocus)时样式改变的实现方法

文本框(input)获取焦点(onfocus)时样式改变的实现方法

时间：2007-02-10 来源：白天的影子

许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果。其实很简单，我们只需要获取页面上的文本框，加上onfocus事件或者其他对应的事件即可。本文介绍了如何在获取焦点时切换样式，明白原理后，实现其他效果就很简单了。

--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------

Javascript:

测试代码：
HTML:

<style type="text/css">
.normalInput {
border:1px solid #ccc;
}
.focusInput {
border:1px solid #FFD42C;
}
</style>
文本框：<input type="text" class="normalInput" />

相关阅读更多 +

排行榜更多 +

<img preview="http://pic.pdowncc.com/uploadimg/ico/2025/0523/1747993424374100.png" width="32" height="32" src="http://pic.pdowncc.com/uploadimg/ico/2025/0523/1747993424374100.png" alt="弓箭勇者最新版" />

<img preview="http://pic.pdowncc.com/uploadimg/ico/2025/0523/1747993424374100.png" width="32" height="32" src="http://pic.pdowncc.com/uploadimg/ico/2025/0523/1747993424374100.png" alt="弓箭勇者最新版" />

飞行射击下载

<img preview="http://pic.pdowncc.com/uploadimg/ico/2025/0523/1747993424374100.png" width="32" height="32" src="http://pic.pdowncc.com/uploadimg/ico/2025/0523/1747993424374100.png" alt="弓箭勇者最新版" />

<img preview="http://pic.pdowncc.com/uploadimg/ico/2025/0523/1747993424374100.png" width="32" height="32" src="http://pic.pdowncc.com/uploadimg/ico/2025/0523/1747993424374100.png" alt="弓箭勇者最新版" />

飞行射击下载

<img preview="http://pic.pdowncc.com/uploadimg/ico/2025/0523/1747993424374100.png" width="32" height="32" src="http://pic.pdowncc.com/uploadimg/ico/2025/0523/1747993424374100.png" alt="弓箭勇者最新版" />

<img preview="http://pic.pdowncc.com/uploadimg/ico/2025/0523/1747993424374100.png" width="32" height="32" src="http://pic.pdowncc.com/uploadimg/ico/2025/0523/1747993424374100.png" alt="弓箭勇者最新版" />

飞行射击下载