在手机上激活按钮？

Question

当用户单击按钮时...

#featured-challenge-button {
  background-color: #446CB3;
  box-shadow: 3px 3px 5px black;
  &:hover {
    background-color: #ccac00;
    box-shadow: none; 
  }
  &:active {
    background-color: #ccac00;
    box-shadow: none; 
  }
  &:focus {
    background-color: #ccac00;
    box-shadow: none; 
  }
}

按钮示例：

# link_to
<%= link_to next_challenge_path, class: "btn", id: "featured-challenge-button" do %>
  <span class="glyphicon glyphicon-plus"></span>
<% end %>

# submit
<%= button_tag(type: 'submit', class: "btn", id: "featured-challenge-button")  do %>
  Save
<% end %>

我怎样才能显示它被立即按下？

在浏览器上它可以工作，但在我的 iPhone 上，点击按钮时没有任何影响。单击按钮的唯一指示是屏幕顶部的加载栏。

我使用:active错误还是有另一种 CSS 技术或有 javascript 解决方案？

Answer 1

您需要ontouchstart在按钮上使用事件。只需使用

ontouchstart=""在您的元素上，并且:active会起作用。

<button ontouchstart="">An Example</button>