为焦点创建浏览器不可知论者或 IE 备用内部按钮边框？ （无障碍相关）
Creating a browser agnostic or IE alternate internal button border for focus? (accessibility related)
我工作的几个额外要求：
需要reactive/mobile友好
还需要与 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
如果您查看第二个 link 并浏览示例，可能会尝试更改方框 class 中的一些内部边框，您会发现此选项很不错刚性，我未能获得与外边缘有足够间隙的适当偏移内边框。
特别是，2px 可能是内边框和外边框之间的最小间距。预期用途类似于 4-6 像素，因此有一个非常清晰的边框，因此我可以创建 7.5:1 的对比度以提高焦点框的可见度。在我的特定用例中，在不破坏网站配色方案的情况下使用外部边框是不可能的，所以这真的是不可取的。
我有点怀疑它是否可以作为跨 3 种以上按钮的通用解决方案，并且在移动设备上看起来也不错。
此外，如果这里的正确答案只是 "that's impossible you need to do something else entirely," 没关系，只要它确实是真的。我没有 CSS 经验可以确定。
我一直无法找到我正在寻找的解决方案。相反，我最终这样做了：
box-shadow: 0 0 0 2px rgb(255, 255, 255),
0 0 0 4px rgb(0, 84, 164) !important;
outline: none !important;
基本上，您必须使用框阴影来模拟轮廓，所以我使用了两个与按钮 colors/look 匹配的框阴影来创建与按钮扩展相同的效果。这通过在按钮和外带之间夹入色带来满足可访问性对比度要求。只要这个内带和按钮在对比度上足够不同，并且外带与按钮匹配，或者其他高对比度颜色。
不是我真正想要的，但不幸的是，没有很多（任何）其他选项可以解决这个问题（旧的 IE 兼容性）。
我工作的几个额外要求：
需要reactive/mobile友好
还需要与 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
如果您查看第二个 link 并浏览示例，可能会尝试更改方框 class 中的一些内部边框，您会发现此选项很不错刚性，我未能获得与外边缘有足够间隙的适当偏移内边框。
特别是，2px 可能是内边框和外边框之间的最小间距。预期用途类似于 4-6 像素，因此有一个非常清晰的边框，因此我可以创建 7.5:1 的对比度以提高焦点框的可见度。在我的特定用例中，在不破坏网站配色方案的情况下使用外部边框是不可能的，所以这真的是不可取的。
我有点怀疑它是否可以作为跨 3 种以上按钮的通用解决方案，并且在移动设备上看起来也不错。
此外，如果这里的正确答案只是 "that's impossible you need to do something else entirely," 没关系，只要它确实是真的。我没有 CSS 经验可以确定。
我一直无法找到我正在寻找的解决方案。相反，我最终这样做了：
box-shadow: 0 0 0 2px rgb(255, 255, 255),
0 0 0 4px rgb(0, 84, 164) !important;
outline: none !important;
基本上，您必须使用框阴影来模拟轮廓，所以我使用了两个与按钮 colors/look 匹配的框阴影来创建与按钮扩展相同的效果。这通过在按钮和外带之间夹入色带来满足可访问性对比度要求。只要这个内带和按钮在对比度上足够不同，并且外带与按钮匹配，或者其他高对比度颜色。
不是我真正想要的，但不幸的是，没有很多（任何）其他选项可以解决这个问题（旧的 IE 兼容性）。