iphone版ion-button焦点背景不变+IONIC2

Posted 2023-03-11

【中文标题】iphone版ion-button焦点背景不变+IONIC2

【英文标题】：iphone version of ion-button focus background doesn't change + IONIC2

【发布时间】：2017-09-10 13:31:07

【问题描述】：

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

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


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

【参考方案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

【讨论】：

在 iOS 版本中还是一样

你说得对，我已经更新了我的答案，请试一试