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

Posted

技术标签:

【中文标题】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:

点击&lt;button&gt; 不会使其成为焦点,即使是tabindex 点击&lt;a&gt; 给它焦点,当它有一个tabindex

iOS 7.1.2

点击&lt;button&gt; 不会使其成为焦点,即使是tabindex 点击&lt;a&gt; 给它焦点,当它有一个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 版本中还是一样 你说得对,我已经更新了我的答案,请试一试

以上是关于iphone版ion-button焦点背景不变+IONIC2的主要内容,如果未能解决你的问题,请参考以下文章

Mac scenephase调研

纯 CSS3 模拟 iPhone 背景切换动画

jquery背景颜色改变焦点和模糊

为啥我的WINFORM按TAB键焦点不变啊

RecycleView刷新数据时保持焦点不变

RecycleView刷新数据时保持焦点不变