css – 如何从接收焦点的jQuery Mobile输入元素中删除蓝光晕

我遇到了同样的问题：

JQuery Mobile: how to not display the button focus halo when a button is clicked?

然而，我尝试了“codaniel”的接受的答案，这是非常好的，除非你想要的项目保留一个常规的阴影 – 只是不是那个蓝色的晕影模糊。当您将应答中显示的CSS规则应用于这些选择器时，它会将焦点上的所有内容(包括所需的正常投影)都移除。任何想法如何保持所需(黑色)的阴影在焦点，但失去蓝色光晕发光？

提前致谢！
油菜

解决方法

使用下面的CSS来覆盖/删除阴影。

07000

.ui-focus {
 -moz-box-shadow: none !important;
 -webkit-box-shadow: none !important;
 box-shadow: none !important;
}

这将从所有输入元素中删除阴影。但是，如果需要，您可以将其作为类添加到特定元素/输入类型。假设类名是noshadow。

更新

我做了一个demo，向您展示如何从不同类型的输入中清除蓝色光晕。所有输入类型都由适合主要类的DIV包装。因此，任何自定义类应该使用.closest(‘div’)添加到该div。

以下代码删除蓝色阴影/添加.noshadow输入type = email，使其他输入不变。

$(document).on('focus','input',function () {
 if ($(this).hasClass('ui-input-text') && $(this).attr('type') == 'number') {
  $(this).closest('div').addClass('noshadow');
 }
});

我使用ui-input-text来识别输入，因为所有输入都具有该类。然而，输入类型=搜索是不同的，因为它具有额外的类.ui-input-search和data-type = search不同于其他输入。所以它需要不同的过程来添加自定义类，这样。

$(document).on('focus',function () {
 if ($(this).closest('div').hasClass('ui-input-search')) { // or $(this).attr('data-type') == 'search'
  $(this).closest('div').addClass('noshadow');
 }
});