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(); // フォーカス解除 );
あらゆる要素で同様なことがしたい
・・・怖いのでしない。しばらくは任意の要素に対してのみ行う。