モバイルでボタンを有効にしますか？

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を使用してください。