按钮点击后，为什么:focus伪类样式仍然可见？

按钮点击后:focus伪类仍可见的原因分析

在页面上，有一个带有“更换账号”标签的按钮。每次用户点击该按钮，就会弹出对话框，在对话框关闭后，按钮的外观却发生了变化。具体现象是，按钮的样式保持了点击后的状态，呈现出:focus伪类的高亮效果。

查看样式表，发现以下css规则控制了此效果：

.el-button--primary:focus, .el-button--primary:hover {     background: #66b1ff;     border-color: #66b1ff;     color: #FFF; }

通过样式可以看出，当按钮处于:focus状态或悬停状态时，就会应用此高亮效果。而问题在于，按钮点击后，:focus状态并未消失。

背后的原理

按钮在被点击时，会暂时进入:focus状态。这是一种浏览器原生行为，允许用户通过键盘交互（如按空格键触发点击）或使用辅助设备（如屏幕阅读器）访问按钮。即使对话框关闭，按钮仍然会保持:focus状态，直到用户将焦点转移到其他元素上（例如单击页面其他区域）。

因此，只要按钮保持:focus状态，:focus伪类样式就会一直应用，导致按钮外观不符合预期。

修复方法

虽然这并不是一个典型的错误，但如果需要消除此效果，可以采取以下方法：

• 使用JavaScript手动移除:focus状态：在对话框关闭后，使用javascript将按钮设置为:blur状态，从而移除:focus状态。
• 自定义按钮的焦点状态处理：修改按钮的样式表，使其在点击后不应用:focus伪类样式。这可以减少误操作的可能性，但也可能影响按钮的可用性。

不过，需要注意的是，保留按钮的:focus状态通常更利于用户交互。通过保持:focus状态，按钮可以接受键盘输入，提高了键盘操作的便利性。因此，在修复此问题时，应权衡按钮外观和用户可用性之间的关系。