onfocus事件css

onfocus事件是一个HTML DOM事件，当一个元素（如输入框、按钮等）获得焦点时触发。这个事件通常用于在元素获得焦点时执行一些JavaScript代码，比如改变元素的样式、显示提示信息等。

虽然onfocus是一个JavaScript事件，但我们可以使用CSS来模拟一些onfocus的效果。以下是一些常见的用法：

1. 使用CSS伪类：focus

我们可以使用CSS的:focus伪类来定义元素获得焦点时的样式。例如：

input:focus {
  border: 2px solid blue;
  background-color: #e6f7ff;
}

这段代码会在输入框获得焦点时，将边框变为蓝色，并将背景颜色改为浅蓝色。

2. 使用JavaScript和onfocus事件

如果需要更复杂的操作，可以使用JavaScript的onfocus事件。例如：

<input type="text" onfocus="this.style.backgroundColor='#e6f7ff'" onblur="this.style.backgroundColor='white'">

这段代码会在输入框获得焦点时将其背景色改为浅蓝色，失去焦点时恢复为白色。

3. 使用CSS过渡效果

我们可以结合使用:focus伪类和CSS过渡效果，实现更平滑的样式变化。例如：

input {
  transition: background-color 0.3s ease;
}

input:focus {
  background-color: #e6f7ff;
}

这段代码会在输入框获得焦点时，平滑地将背景色改为浅蓝色。