最外面的矩形框,是table row里任意一个元素被focus之后,触发整个cx-table :focus-within的选择器后生成的效果:

SAP Spartacus org unit页面的三种focus border及细节讨论

中间的一条竖线,是a标签 focus后的效果;
button标签focus之后,产生一个小的矩形框;

注意cx-table:focus-within的outline-offset -2px是必须的:

SAP Spartacus org unit页面的三种focus border及细节讨论

否则最后整个table row的focus-within的border,就是下图上下两根线,会超出table border灰线,看起来很ugly.

SAP Spartacus org unit页面的三种focus border及细节讨论

如果直接在Chrome开发者工具里选中标签页,然后在Styles里手动勾上:focus-within,此时效果如下:

SAP Spartacus org unit页面的三种focus border及细节讨论

关于a标签页的focus border,我还有一些有趣的发现。

下列这两个property去掉后,又能看到a的focus border了:

  • width: 100%;
  • min-height: 74px;

SAP Spartacus org unit页面的三种focus border及细节讨论

加上之后,又变成只有最左边有focus border了:

SAP Spartacus org unit页面的三种focus border及细节讨论

SAP Spartacus这个自适应的table,如果屏幕尺寸过窄,则只会显示name这一列:

SAP Spartacus org unit页面的三种focus border及细节讨论

在这种窄屏的显示风格下,此时a标签的focus border就正常了:

SAP Spartacus org unit页面的三种focus border及细节讨论

更多Jerry的原创文章,尽在:“汪子熙”:
SAP Spartacus org unit页面的三种focus border及细节讨论

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-12-21
  • 2021-06-19
  • 2022-12-23
  • 2021-11-15
  • 2022-12-23
  • 2021-08-11
猜你喜欢
  • 2021-05-17
  • 2021-06-04
  • 2022-01-01
  • 2021-09-27
  • 2021-05-11
  • 2021-05-16
  • 2021-10-27
相关资源
相似解决方案