20

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

JQuery Mobile：单击按钮时如何不显示按钮焦点光环？

但是，我尝试了“codaniel”接受的答案，效果很好，除了当您希望相关项目保留常规投影时 - 不是那种蓝色光晕模糊。当您将他的答案中显示的 CSS 规则应用于这些选择器时，它会删除焦点上的所有内容 - 包括所需的正常投影。任何想法如何保持所需的（黑色）阴影聚焦但失去蓝色光晕？

提前致谢！油菜

4

4 回答 4

35

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

演示

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

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

更新

我做了一个演示，向您展示如何从不同类型的输入中移除蓝色光晕。所有输入类型都由容纳主要类的 DIV 包装。因此，任何自定义类都应该使用.closest('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');
 }
});
于 2013-06-06T22:06:01.690 回答
9

如果您想删除它，请使用Omar 的回答。

如果您想要一个阴影但颜色不同，您需要更改并覆盖阴影颜色，如下所示：

.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将涵盖每个输入元素。您只需要找到最适合您的颜色。

于 2013-06-06T22:14:19.687 回答
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;
}

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

于 2013-06-06T21:51:32.777 回答
2

有它在多种类型的元素上，这就是为我修复它的原因

* {
  outline: none;
}
于 2018-08-09T16:52:37.853 回答