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

Question

我遇到了与以下所列相同的问题:

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

但是，我尝试了“codaniel”接受的答案，效果很好，除非您希望相关元素保留常规投影 - 只是不是蓝色光晕模糊。当您将他的回答中显示的 CSS 规则应用于这些选择器时，它会删除焦点上的所有内容 - 包括所需的正常投影。有什么想法可以让所需的(黑色)投影保持在焦点上但失去蓝色光晕吗？

提前致谢!科尔

Answer 1

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

Demo

.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 来识别输入，因为所有输入都具有该类。但是，输入 type=search 不同，因为它有一个额外的类 .ui-input-search 和 data-type=search 不像其他输入。因此，以这种方式向其添加自定义类需要不同的过程。

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