css - 为焦点创建浏览器不可知论者或 IE 备用内部按钮边框？ (无障碍相关)

Question

我工作的几个额外要求:

• 需要响应式/移动友好

• 还需要与 chrome、firefox 兼容，最好是与 opera 兼容。

  <button class="outline">
  Lol A button
  </button>
  
  button{
    background-color: blue;
    color: white;
    padding: 15px;
  }
  .outline:focus{
    outline: 2px solid white;
    outline-offset: -6px;
  }
  

JS Fiddle example of what I'm doing now

编辑:

JS Fiddle Example of the trouble I'm having with past similar question answers

如果您查看示例中的第二个链接和选项卡，可能会尝试更改框类中的一些内部边框，您会发现此选项非常严格，而且我未能获得合适的偏移内边框，与外边缘有足够的间隙。

特别是，2px 可能是内边框和外边框之间的最小间隙。预期用途类似于 4-6 像素，因此有一个非常清晰的边框，因此我可以创建 7.5:1 的对比度以提高焦点框的可见度。在我的特定用例中，在不破坏网站配色方案的情况下，使用外部边框是不可能的，因此这确实是不可取的。

我有点怀疑能否将其作为跨 3 种以上按钮类型的通用解决方案，并且在移动设备上看起来也不错。

此外，如果此处的正确答案只是“您不可能完全需要做其他事情”，那也没关系，只要它确实是真的。我没有 CSS 经验无法确定。

Answer 1

我一直无法找到我正在寻找的解决方案。相反，我最终这样做了:

box-shadow: 0 0 0 2px rgb(255, 255, 255),
0 0 0 4px rgb(0, 84, 164) !important;
outline: none !important;

基本上，您必须使用框阴影来模拟轮廓，所以我使用了两个与按钮的颜色/外观相匹配的框阴影来创建与按钮扩展相同的效果。这通过在按钮和外带之间夹入色带来满足可访问性对比度要求。只要这个内带和按钮在对比度上足够不同，并且外带与按钮或其他高对比度颜色相匹配。

不是我真正想要的，但不幸的是，没有很多(任何)其他选项可以解决这个问题(旧的 IE 兼容性)。