ラボ > Javascript関連:イベント関連、CSS、BootstrapCSS

css/jquery クリックやタップしたときの枠線を消す(focus, outline:none, blur())

ブラウザの問題かCSSだけでは対応できないこともある。そのときはJSでフォーカス解除(blur())。

作成日:2021-11-18, 更新日:2022-09-15

基本

対象に「outline: none」を設定すればOKっぽい。
bootstrapを使っている場合、_reboot.scssの設定が優先されるので対処が必要

*:focus {
  outline: none !important; /* _reboot.scssがいるので、優先させる */
}

a {
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
  cursor:pointer !important;
}

CSSだけでは対応できないとき

JSでどうにかする・・・クリックしたときにフォーカスがあたり、その後、フォーカスが解除されないから枠線が残る・・・なら、フォーカスを解除すれば良いってコトで下記のような感じ

$(hoge).on('click', function(){
  ~クリックしたときの何かの処理~
  $(this).blur(); // フォーカス解除
);

あらゆる要素で同様なことがしたい

・・・怖いのでしない。しばらくは任意の要素に対してのみ行う。