css - jQueryを使用するときにSafariでデフォルトのボタンの強調表示を削除する方法

Question

OS XのSafariでは、デフォルトのjQueryボタンの周りに青い光がハイライト表示されていることに気づきました。チェックしたところ、 jQueryUIデモページでも同じことが起こります。

Safariでのデフォルトのボタンの強調表示

同じマシンのFirefoxでは次のようになります

ここに画像の説明を入力してください

Safariでこれを削除するために何ができるか教えてもらえますか？私はまだデフォルトの振る舞いを望みます。

score 122 · Accepted Answer

outline:noneブラウザがデフォルトのアクションとして適用する可能性のある入力のハイライトを削除するには、cssにいつでも使用できます。あなたの場合、それはbutton要素です。したがって、これは機能するはずです。

button {
    outline: none;
}

CSSのアウトラインを削除することはお勧めしませんが。アクセシビリティに悪いので。（これについて言及してくれたRobin Clowersに感謝します）

score 10 · Accepted Answer

これを使ってみてください

CSSの場合：

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

Javascriptの場合：

document.addEventListener("touchstart", function(){}, true）;

score 4 · Accepted Answer

*{
    outline: none;
}

.blah{
    outline-color: blue;
}

これは既存のものには影響しません。（.blah）これはGoogleChromeでも機能します。

ライブデモ： http： //jsfiddle.net/DerekL/TUbjc/

score 0 · Accepted Answer

このボタンには、実際にはアウトラインプロパティが定義されています。これをオーバーライドする必要があります。Firebugでこれを調べると、このボタンの次のCSS宣言が表示されます。

.ui-dialog .ui-dialog-buttonpane button{outline:none;}

4 に答える 4