CSS概述周围的按钮无法在iPad Chrome上运行

Question

我正在显示手册＆＃39;选择编辑＆＃39;使用CSS在按钮周围勾勒出轮廓。 （用户单击按钮将其选中，然后使用页面上其他位置的向上/向下箭头更改所选按钮上显示的值。用户可以在网格中编辑许多按钮。）

CSS＆＃39;大纲＆＃39;在PC上的Chrome中工作正常，但在iPad（IOS 10）上的Chrome中无法显示任何内容。任何人都可以推荐能让它在iPad上运行的CSS吗？

Angular2：

<button class='rtb-btn btn-{{this.state}}'  (click)='this.incrementState()' (blur)='this.onBlurTemplateButton($event)'>

CSS：

.btn-calculated:focus           { outline: 0; }
.btn-calculated-selected:focus  { outline: 1; outline-color: black }
.btn-forced:focus               { outline: 0; }
.btn-forced-selected:focus      { outline: 1; outline-color: black }
.btn-editing-selected:focus     { outline: 1; outline-color: black }
.btn-locked:focus               { outline: 0; }