css 文本框鼠标获取焦点

在网页中，我们经常需要使用文本框来让用户输入信息。而为了提高用户体验，当用户把鼠标移动到文本框上时，我们希望文本框有个特殊的样式，这样用户就能知道哪个文本框可以输入了。这就是焦点状态，也就是鼠标获取焦点的状态。

在CSS中，我们可以使用:focus伪类来定义焦点状态的样式。当用户把鼠标移动到文本框上时，:focus会生效，我们就能定义文本框的样式。

input[type=text]:focus {
  border: 2px solid #007bff;
  Box-shadow: 0 0 5px #007bff;
}

在这段代码中，我们定义了一个输入框的样式，只有当输入框被焦点选中时，才会显示这种样式。首先，我们给输入框定义了一个2像素的实线边框，颜色为#007bff。接着，我们使用Box-shadow为输入框加上了一个蓝色的阴影，这样输入框就会看起来更有层次感。

除了输入框，我们还可以使用:focus伪类来定义其他元素的焦点状态。比如我们可以修改按钮的背景颜色和字体颜色。

button:focus {
  background-color: #007bff;
  color: #fff;
}

上述代码中，我们定义了一个按钮元素的样式。当按钮被选中时，它的背景颜色会变为#007bff，字体颜色会变为白色。

总之，使用:focus伪类可以让我们轻松地修改页面中元素的焦点状态样式，从而提高用户的交互体验。同时，在开发过程中，我们还需要注意对不同浏览器的兼容性问题。