ios - iphone 版 ion-button focus 背景不变 + IONIC2

Question

我正在使用此按钮，如果我点击按钮，背景将从蓝色转换为黑色，颜色从黄色转换为白色。 但是在 iOS 构建中，当我点击它时，背景不会保持黑色。当我的手指离开屏幕时，屏幕会恢复到原始状态。

<button ion-button block round outline color="danger" (click) = "gotoNextWithParent()">
      Parent
    </button>


button:focus{ 
  background:#000;
  color:#ffffff;
}

Answer 1

根据 MDN:

Safari 7.0.5:

• 点击 <button> 没有给它焦点，即使是 tabindex
• 点击 <a>给它焦点，只有当它有 tabindex 时

iOS 7.1.2

• 点击 <button> 没有给它焦点，即使是 tabindex
• 点击 <a>给它焦点，只有当它有 tabindex 时

因此，根据以上所述，您没有运气将焦点放在 button 上你应该改用 anchor并给予重点。

a {
  appearance: button;
  -moz-appearance: button;
  -webkit-appearance: button;
  text-decoration: none;
  color: ButtonText;
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid black;
}

button:focus, 
a:focus {
  background: #000;
  color: #ffffff;
}

<button>A button</button>
</br>
</br>
<a href="#" onclick="event.preventDefault()" tabindex="1">An anchor</a>

JSBin to check on iOS (在 iOS 10.3.3 上测试)

MDN 上的信息:

• Clicking and focus on a button
• Clicking and focus on an anchor