C# Blazor Web应用按钮点击后自定义轮廓消失问题求助

问题出在你只处理了按钮的默认和active（点击瞬间）状态，却没处理focus（点击后焦点停留）状态。点击按钮后，元素会进入焦点状态，此时浏览器默认的焦点样式会覆盖你自定义的轮廓，导致看起来轮廓消失，直到焦点转移到其他元素（比如另一个按钮）。

直接修改按钮的CSS类，添加focus状态的轮廓样式即可：

<button class="bg-white outline outline-1 outline-[#1fc2de] active:outline-1 active:outline-[#1fc2de] focus:outline-1 focus:outline-[#1fc2de] py-1 px-2 w-full active:scale-95 font-semibold rounded-lg">Trace Outside</button>

如果你的项目里定义了main-colour自定义颜色，也可以把outline-[#1fc2de]换成outline-main-colour，保持样式统一。

另外注意：不要为了隐藏这个问题就移除焦点状态的轮廓，这会损害页面的可访问性——键盘导航的用户依赖焦点轮廓来判断当前选中的元素。

内容的提问来源于stack exchange，提问作者user22722316