jQuery Mobile を使用して Web アプリにボタンがあります。
ボタンをクリックすると、ボタンの周りに青いハローを表示する ui-focus クラスが追加されます。ページの別の場所がクリックされるまで、クラスはそこにとどまります。これは、iPad ではなく、Firefox で発生します。このハローが表示されないようにしてほしい。
そのフォーカス ハローがまったく表示されないようにするにはどうすればよいですか?
jQuery Mobile を使用して Web アプリにボタンがあります。
ボタンをクリックすると、ボタンの周りに青いハローを表示する ui-focus クラスが追加されます。ページの別の場所がクリックされるまで、クラスはそこにとどまります。これは、iPad ではなく、Firefox で発生します。このハローが表示されないようにしてほしい。
そのフォーカス ハローがまったく表示されないようにするにはどうすればよいですか?
ソースをハッキングする代わりに、デフォルトの css をオーバーライドできます。CSSファイルがJQMファイルの後にあることを確認してください。
.ui-focus,
.ui-btn:focus {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none ;
}
これを行う最良の方法は、ボタンがクリックされた後にページにフォーカスを戻すことです。
$('yourButtons').click(function(){
//Do some important stuff
// ....
$.mobile.activePage.focus();
});
カスタム送信ボタンがあり、ボタンで data-role="none" を使用したため、どのソリューションも機能しませんでした。:focus イベントにはまだ青い輝きがあったので、これでうまくいきました。フォームを myform という div でラップしました。
.myform button:focus {
outline: 0;
}
簡単です。xxx-mobile-theme.css ファイル
を開いてクラスui-focusを見つけ、 box-shadowプロパティを手動で
削除するだけです。