在网页设计中，文本框（input）的聚焦和失焦样式是用户体验的重要组成部分。聚焦指的是用户将鼠标光标置于输入框内，此时输入框通常会有视觉上的变化以提示用户当前可输入；失焦则表示用户将光标移出输入框，输入框恢复原样式。在本文中，我们将探讨如何使用CSS和JavaScript（特别是jQuery库）来实现文本框input的聚焦与失焦样式的改变。
我们可以使用CSS的伪类选择器`:focus`来定义元素在获得焦点时的样式。以下是一个例子：
```css
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
border: 1px solid #f00;
background: #ccc;
}
```
这段代码为文本输入框、密码输入框和文本区域在获得焦点时设置了一个红色边框和灰色背景。然而，这个方法在Internet Explorer 6（IE6）中并不生效，因此我们需要借助JavaScript（如jQuery）来实现兼容。
使用jQuery，我们可以监听`focus`和`blur`事件来改变输入框的样式。以下是实现聚焦和失焦样式的jQuery代码示例：
```javascript
$(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`方法来简化代码，创建一个特定的CSS类，然后在聚焦和失焦时添加或移除该类：
```javascript
$(document).ready(function(){
$("input[type='text'], input[type='password'], textarea")
.focus(function(){$(this).addClass("focus")})
.blur(function(){$(this).removeClass("focus")});
});
```
在此，你需要在CSS中定义一个名为`.focus`的类，包含聚焦时的样式，例如：
```css
.focus {
border: 1px solid #f00;
background: #ccc;
}
```
这种方法使得代码更具有可读性和可维护性。
总结来说，通过CSS和jQuery，我们可以优雅地处理文本框input的聚焦与失焦样式，确保在各种浏览器中提供一致且良好的用户体验。对于旧版本的IE浏览器，尤其需要使用JavaScript来弥补CSS的兼容性问题。使用合适的编程技巧和组织代码的方式，可以提高代码的效率和可维护性。
