https://sap.github.io/spartacus-docs/visible-focus/

In Spartacus, focusable elements are styled with a blue outline. This appearance can be further customized in the CSS layer if you prefer to have an alternative effect for certain elements.

默認是藍色邊框，可以定制化。

Given that :focus-visible is not supported by all ever-green browsers, Spartacus provides an implementation to accomplish the same effect. If the user is using the mouse, the visible focus is hidden. If the user switches (temporarily) to the keyboard, the visible focus is enabled.

對鼠標用戶而言，visible focus被隱藏。對keyboard用戶而言，visible focus被啟用。

The appearance of the focus outline is driven by CSS. The usage of this style depends on the occurrence of the mouse-focus class. Without this class, the visual focus is not added to focused elements.

visible focus通過元素的mouse-focus class實現。

The mouse-focus class is part of the cxFocus directive, and is added by applying the directive to the three root elements in the cx-storefront component, as follows:

全部改成false后ng serve：

我能明顯觀察到，此時用鼠標點擊focusable element之后，會產生同鍵盤tab key按下相同的藍色邊框。

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP Spartacus Visible Focus的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。