如何从接收焦点的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: how to not display the button focus halo when a button is clicked?

但是，我尝试了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?

提前感谢！
Cole

Thanks in advance! Cole

推荐答案

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

Use the below CSS to override/remove the shadow.

演示

Demo

.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包装，可容纳主要类。因此，任何自定义类应该使用 .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 code> 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屋！