iPhoneのSafariのデフォルトの挙動（ボタンをタップした際の色、テキスト選択、長押しで開くメニュー）をリセットしたいという想い

結論

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

でOK。

---

こちらのページ で検証しました。（iOS10.1のiPhone6を使用して確認）

http://jsrun.it/kimmy/ITBo

---

ボタンをタップした際に薄暗くなるのをなんとかしたい。

※ NOMALをタップしています。

CSS

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

CSSでタップした際の色を変更できます。
ここで透明色を指定すれば結果的に薄暗ならなくなります。

developer.mozilla.org

---

ボタンを長押した際に開くメニューをなんとかしたい

※ NOMALを長押ししています。

CSS

-webkit-touch-callout: none;

• webkit-touch-calloutにnoneを指定することでメニューが開かなくなります。

defaultを指定すると開くようになります。

developer.mozilla.org

---

長押しでのテキスト選択をどうにかしたい

※ NOMALを長押ししています。

CSS

-webkit-user-select: none;

• webkit-user-selectをnoneにすることによって、ユーザーが選択できなくなります。

デフォルト値はdefaultだと思いこんでいたのですが、調べてみたらtextでした。

developer.mozilla.org

---

おまけ ダブルタップでの拡大をどうにかしたい

iOS10になってから、user-scalable=noを指定してもテキスト等をダブルタップするとページが拡大してしまうことに悩んでいる開発者も多いと思います。
強引な手法ですが、JavaScriptでタップしてから0.2秒間タップを受け付けなくするとどうにかなります。
以前は0.15秒を推奨していたのですが、iOS10で検証するとまれに拡大してしまうことがあったので0.2秒にしました。

JavaScript

(function(win, doc) {
    
  "use strict";
    
  var INTERVAL = 200,
      tapFlag = false,
      timer;
    
  doc.body.addEventListener("touchstart", function(evt) {
    if (tapFlag) {
      evt.preventDefault();
    }
  }, true);

  doc.body.addEventListener("touchend", function(evt) {
    tapFlag = true;
    clearTimeout(timer);
    timer = setTimeout(function() {
      tapFlag = false;
    }, INTERVAL);
  }, true);
    
})(window, document);

kimizuka.hatenablog.com