如何使用CSS :focus 伪类为元素添加获取焦点效果？

在CSS中，:focus 伪类用于为元素添加获取焦点时的样式效果。当用户点击或通过键盘导航到元素时，该元素就会获得焦点，我们可以通过 :focus 伪类来定义相应的样式。

要使用 :focus 伪类，需要先选择一个具有焦点的元素，例如一个文本框或按钮。然后，通过CSS选择器来为该元素定义样式。

input:focus {
    border: 2px solid blue;
}

在上面的代码中，当文本框获得焦点时，边框会变成蓝色。

除了边框样式，我们还可以通过 :focus 伪类来改变元素的其他样式，比如背景色、文字颜色等。

button:focus {
    background-color: yellow;
    color: red;
}

上面的代码中，当按钮获得焦点时，背景色会变成黄色，文字颜色会变成红色。

需要注意的是，:focus 伪类只能应用于能够获得焦点的元素，比如链接、按钮、输入框等。如果我们想要给一个普通的 div 元素添加获取焦点效果，是不起作用的。

通过使用 :focus 伪类，我们可以为用户提供更好的交互体验，让用户明确知道当前操作的元素是哪个。同时，合理运用这一特性，还可以增强页面的可访问性。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 如何使用CSS :link 伪类为元素添加未访问链接样式？
• 下一篇： 如何使用CSS设置元素的边框为心形效果？