文本框input聚焦失焦状态样式

大家都知道浏览器里面的文本框的聚焦(focus)时可以改变样式，可以变得更漂亮，让用户体验会更好，今天72色来给大家看看这个样式怎么去改变。

首先用css的伪类：focus可以改变。
文本框的html代码假设如下：
<dl>
  <dt>Name: <dt>
  <dd><input type="text" /></dd>
  <dt>Password: <dt>
  <dd><input type="password" /></dd>
  <dt>Textarea: <dt>
  <dd><textarea></textarea></dd>
</dl>

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”。

一切搞定了！

转载于:https://www.cnblogs.com/72color/archive/2010/04/28/1722731.html