HTML按钮无法控制“焦点”功能

Question

困惑...我已经尝试过CSS和JQuery，我似乎无法获得焦点功能，无法在我的HTML按钮上正常工作。这是Firefox 54。

我的所有按钮都有一个灰色背景，在“悬停”时呈浅蓝色。文字是黑色的。这些颜色似乎是“默认”。

button::-moz-focus-inner {
  border: 0;
} 

但是，如果我去，例如，

button::-moz-focus-inner {
  color: green;
  background-color: red;
} 

...在焦点上，文字不会变为绿色，背景也不会变红 我也试过了：

button :focus {
    background-color: blue;
}

......没有效果。
我也试过通过

来检测焦点事件

$(document).ready( function()
{
    $( 'button' ).focus( function(){
        console.log( '£ button got focus' );
    });
    ... 

...当我把焦点放在任何按钮上时没有任何反应！

我自然也在这里尝试谷歌搜索和搜索。我似乎缺少一些基本的东西！我试图查看任何可能干扰“正常”机制的CSS，但无济于事。

任何人都知道发生了什么事？

Answer 1

我尝试过编辑你的代码，我相信最终结果就是你要找的东西。 您可以在这里查看JSFiddle：https://jsfiddle.net/c9mbtrz0/

最终，您需要为CSS和JS部分做的是：

＆＃13;

＆＃13;

$(document).ready(function() {
  $('button').focus(function() {
    console.log('£ button got focus');
  });
});

＆＃13;

button:focus {
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Test
</button>

＆＃13;

＆＃13;

＆＃13;