首先用css的伪类：focus可以改变。
文本框的 html代码假设如下：
复制代码 代码如下:
name:
password:
textarea:
css 代码这样写：
input[type=text]:focus, input[type=password]:focus, textarea:focus { border: 1px solid #f00; background: #ccc; }
分别列出了文本框、密码框、还有段落框这三个input框的聚焦时候的样式。加上个红色的边框和灰色的背 景。
现在就这么简单的解决了吗？用浏览器（firefox, safari, ie7）来测试，一切ok，不过不支持ie6.
想 让ie6也是一样漂亮的效果只能借助接js了，这里我用jquery给大家做一个效果。
复制代码 代码如下:
$(document).ready(function(){
$(input[@type='text'], input[@type='password'], textarea).focus( function(){ $(this). css({background:#ccc, border:1px solid #f00})} );
});
jquery做起来是不是也很简单，感觉和css的书写方式差不多吧！
这只是聚焦状 态，jquery失焦状态是要你给出指示的，很傻很天真，它自己不会变回来，那就在给加上失焦状态。
复制代码 代码如下:
$(document).ready(function(){
$(input[@type='text'], input[@type='password'], textarea).focus(function(){$(this).css({background:#ccc, border:1px solid #f00})}).blur(function(){$(this).css({background: “#fff”, border: “1px solid #ccc”})});
})
失焦以后背景边成白色，边框变成灰色。
当然你也可以用 jquery的addclass和removeclass来简化代码：
复制代码 代码如下:
$(document).ready(function(){
$(input[@type='text'], input[@type='password'], textarea).focus(function(){$(this).addclass(focus)}).blur(function(){$(this).removeclass(focus)});
})
先 给input框给个默认样式，聚焦的时候用addclass加上css“focus”，失焦的时候在用 removeclass去掉css“focus”。
一切搞定了！