[Style] [button, button-group] elementui中el-button点击后按钮颜色不变

[gordon95]

Bug Type: Style

Environment

• Vue Version: 3.2.47
• Element Plus Version: 2.3.1
• Browser / OS: Chrome
• Build Tool: Vite

Reproduction

Related Component

• el-button
• el-button-group

Reproduction Link

Element Plus Playground

Steps to reproduce

点击【确认】按钮，鼠标离开不会恢复原来的颜色。

What is Expected?

鼠标悬停【确认】按钮才会触发按钮背景色，鼠标离开就没有背景色

What is actually happening?

点击【确认】按钮会触发按钮背景色，鼠标离开按钮没有恢复原来的颜色

Additional comments

讲真的，饿了么团队的大佬们，你们难道没注意到这个问题吗？官网button按钮的示例都是点击以后不会恢复原来的颜色，正常情况不应该是鼠标悬浮在按钮上的时候显示颜色，鼠标离开按钮就恢复原来的颜色吗？现在这种设计也太不人性化了吧，希望能修复。

[gimjin]

html <button /> onmousedown的默认策略鼠标按下后处于 focus 状态，也就是看上去没有恢复成原来的颜色（此时是focus样式被激活）。 修改这个问题非常简单，不过不应该破坏w3标准的默认策略，因为网页访问者有正常人、残障人、机器人等，可能会破坏其他使用者的操作。
假如强制取消focus状态我想到的问题就是，残障人士无法使用专用设备或键盘连续对按钮进行操作。

我提供下面两种方案，快速解决你的问题

1. 阻止 mousedown 时 focus 请看 demo
2. 你的应用场景并没有 focus 状态的话，可以在主题中把 focus 状态颜色改成normal状态。

希望对你有帮助

[MrWeilian]

认同楼上大佬所说的，再补充一个场景：用户点击弹窗且操作完毕后，可以快速恢复到之前的浏览上下文。

而且这个issue在 #8930 有讨论，详细可以点进去看看。

[gimjin]

element-plus 维护者们对待 w3 标准我个人是非常认同的，比如

1. element-plus 支持 a11y, antdv 完全没有适配 aria-disabled 和 :focus-visible, 还有 docs(components): [datetime-picker] event parameters #8930 讨论的 tdesign 直接把默认行为给干掉了；
2. 还是会引入 css 虽然是 scss 写出来的本质上还是 css，并没有像 naive-ui 那样全部用 js 写出来（虽然某种理念上可能这更高级，可是我不太认可 allin js 的行为）

不过我个人认为 focus 状态 效果 的确存在缺陷，focus 状态应该是基于active状态下更突出视觉效果（类似bootstrap5的效果），达到视觉与操作连贯性。 当前效果会给最终网页预览者造成困惑和误解

1. 为什么messagebox Confirm 按钮是 disable 状态（虽然帮助用户自动focus确认按钮，方便按下enter激活）
2. 为什么点击按钮后，按钮没有恢复而是一直是按下去的状态

@MrWeilian 建议对 focus 状态的颜色、边框上做一些视觉优化。

[gordon95]

感谢大佬的指点

[2414942130]

大佬，怎么处理的

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

此 issue 已被自动锁定，因为关闭后没有任何近期活动。如果有相关 bug，请重新创建一个新 issue。