JQuery Mobile：单击按钮时如何不显示按钮焦点晕？

Question

我使用jQuery Mobile在我的网络应用程序中有按钮。

单击时，按钮会添加ui-focus类，在按钮周围显示蓝色光环。班级一直待在那里，直到点击页面上的另一个点。这发生在Firefox，而不是iPad。我希望这个光环不显示。

我必须做些什么才能完全不显示焦点光环？

Answer 1

您可以覆盖默认的CSS而不是黑客攻击源。只需确保您的css文件位于JQM之后。

.ui-focus,
.ui-btn:focus {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none ;
}

Answer 2

我发现执行此操作的最佳方法是在单击按钮后将焦点返回到页面。

$('yourButtons').click(function(){
    //Do some important stuff
    // ....

    $.mobile.activePage.focus();
});

Answer 3

那很简单，只需打开你的xxx-mobile-theme.css文件
找到课程 ui-focus 并手动删除 box-shadow 属性

Answer 4

由于我有一个自定义提交按钮并使用了data-role =＆＃34; none＆＃34;在按钮上。 ：焦点事件仍然有蓝色的光芒，所以这对我有用。我把表格包裹在名为myform的div中。

.myform button:focus {
  outline: 0;
}