点击按钮后为什么它还保持着 :focus 样式？

为什么按钮点击后保持 :focus 样式？

在您的案例中，按钮点击后仍然保持 :focus 样式，这是由于按钮处于 focus 状态所致。当元素处于 focus 状态时，表示该元素可以与键盘交互，此时会触发某些视觉效果，如边框变色或带有光标。

对于按钮而言，focus 状态的作用包括：

• 使用空格键触发点击事件
• 使用 tab 键切换焦点

因此，即使点击弹框按钮关闭弹框，按钮仍然保持 focus 状态，因为它仍然可以与键盘交互。

这是否是 bug？

在一般情况下，这并不被视为 bug。保持按钮的 focus 状态有助于用户明确当前选中的元素，方便他们使用键盘进行交互。

然而，在某些特定情况下，此效果可能会令人混淆。例如，如果按钮包含敏感数据，用户可能认为按钮处于非激活状态，从而意外泄露数据。

解决方案

如果您确实认为这会导致混淆，可以考虑以下解决方案：

• 使用 :active 伪类而不是 :focus。active 伪类在按下元素时触发，因此在点击按钮后会消失。
• 手动移除 focus 状态。可以通过 JavaScript 或 CSS 在点击弹框按钮后手动移除元素的 focus 状态。
• 向用户解释 focus 状态的特性。让用户了解按钮在点击后仍然处于 focus 状态的原因，避免产生混淆。