google-chrome - 「：focus」疑似クラスがChromeで機能しない

Question

ボタンに：focus疑似クラスを使用しています（押されたとき）。Firefoxでは正常に動作しますが、Chromeでは状態が変わりません。回避策はありますか？

CSS：

.btn:focus {
    box-shadow: 1px 1px 1px #586601 inset;
    text-shadow: -1px -1px 1px #000000;
}

（これは、クラス「btn」の入力タグです。）

Answer 1

:focusとを区別する必要があります。ドキュメント:activeを参照してください。

:focusセレクターは、フォーカスのある要素を選択するために使用されます。

セレクターは、:activeアクティブなリンクを選択してスタイルを設定するために使用されます。

リンクをクリックするとアクティブになります。

スタイルを次のように変更する必要があります。

.btn:active, .btn:focus {
   box-shadow: 1px 1px 1px #586601 inset;
   text-shadow: -1px -1px 1px #000000;
}

注：効果を上げるには、CSS定義の後に（存在する場合）:active後になければなりません！:hover

デモ

Answer 2

クリックしたときにボタンにフォーカスを合わせたい場合（Chromeは明らかにそれを行いません）、手動で行うことができます。jQueryの使用：

$(".btn").on("click",function(){
  $(this).focus()
}

フィドル： http： //jsfiddle.net/HSWDc/

Answer 3

次のことを試してください。

-webkit-box-shadow: 1px 1px 1px #586601 inset;
-moz-box-shadow: 1px 1px 1px #586601 inset;
-webkit-text-shadow: -1px -1px 1px #000000;
-moz-text-shadow: -1px -1px 1px #000000;