如何从接收焦点的 jQuery Mobile 输入元素中去除蓝色光晕 [英] How to remove the blue halo glow from jQuery Mobile input elements that receive focus

问题描述

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

I'm encountering the same problem as listed in:

JQuery Mobile:如何在单击按钮时不显示按钮焦点光环?

但是，我尝试了codaniel"接受的答案，该答案非常有效，除非您希望相关项目保留常规阴影 - 只是不是那种蓝色光晕模糊.当您将他的回答中显示的 CSS 规则应用于这些选择器时，它会移除焦点上的所有内容 - 包括所需的正常投影.任何想法如何将所需的(黑色)阴影保持在焦点上但失去蓝色光晕?

However, I tried the accepted answer by "codaniel" which works great, EXCEPT for when you want the item in question to retain a regular drop shadow - just not that blue halo blur. When you apply the CSS rules shown in his answer to those selectors, it removes everything on focus - including the desired normal drop shadow. Any ideas how to keep the desired (black) drop shadow on focus but lose the blue halo glow?

提前致谢！科尔

推荐答案

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

Use the below CSS to override/remove the shadow.

演示

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

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

This will remove shadow from all input elements. However, if you want, you can add it as a class to specific elements/input types. Assuming the class name is noshadow.

我制作了一个演示来向您展示如何从不同类型的输入中去除蓝色光晕.所有输入类型都由一个 DIV 包装，该 DIV 可容纳主要类.因此，任何自定义类都应该使用 .closest('div') 添加到该 div 中.

I made a demo to show you exactly how to remove blue halo glow from different types of inputs. All input types are wrapped by a DIV which accommodates major classes. Thus, any custom class should be added to that div using .closest('div').

下面的代码去除了蓝色阴影/将 .noshadow 添加到输入 type=email 中，其他输入保持不变.

The below code removes blue shadow / adds .noshadow to input type=email only, leaving other inputs untouched.

$(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 不像其他输入.所以它需要不同的过程来向它添加自定义类，这种方式.

I used ui-input-text to identify the input as all inputs have that class. However, it is different for input type=search as it has an additional class .ui-input-search and data-type=search unlike other inputs. So it requires different procedure to add custom class to it, this way.

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

这篇关于如何从接收焦点的 jQuery Mobile 输入元素中去除蓝色光晕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！