ラボ > Javascript関連：イベント関連、CSS、Bootstrap、CSS

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

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

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

基本

対象に「outline: none」を設定すればＯＫっぽい。
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(); // フォーカス解除
);

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

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