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');
 }
});

Answer 2

如果您要将其删除，请使用 Omar's 回答。

如果你想拥有不同颜色的阴影，你需要更改并覆盖阴影颜色，如下所示：

.ui-focus,
.ui-btn:focus {
    -moz-box-shadow: inset 0 0 3px      #555  , 0 0 9px         #555  !important;
    -webkit-box-shadow: inset 0 0 3px   #555  , 0 0 9px         #555  !important;
    box-shadow: inset 0 0 3px           #555  , 0 0 9px         #555  !important;
}
.ui-input-text.ui-focus,
.ui-input-search.ui-focus {
    -moz-box-shadow: 0 0 12px           #555 !important;
    -webkit-box-shadow: 0 0 12px        #555 !important;
    box-shadow: 0 0 12px                #555 !important;    
}

工作示例：http://jsfiddle.net/Gajotres/ywraY/

不要忘记使用！important，这是唯一可以覆盖原始 CSS 的方式。此 CSS 将涵盖每个输入元素。您只需找到最适合您的颜色。

Answer 3

只需记下常规阴影而不是阴影。

.ui-focus,
.ui-btn:focus {
    -moz-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px 0px;
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px 0px;
}

或使用您选择的其他阴影。

Answer 4

对多种元素都有它，这对我来说是固定的

* {
  outline: none;
}

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

4 个答案:

更新