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

Question

我遇到了与列出的相同的问题:

JQuery Mobile:单击按钮时如何不显示按钮焦点晕？

然而,我尝试了"codaniel"所接受的答案,这种方法效果很好,除非你想让有问题的项目保留一个规则的阴影 - 只是不是那个蓝色光晕模糊.当您将答案中显示的CSS规则应用于这些选择器时,它会删除焦点上的所有内容 - 包括所需的正常投影.任何想法如何保持焦点上所需的(黑色)投影但失去蓝色光晕？

提前致谢!油菜

Answer 1

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

演示

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

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

更新

我做了一个演示,向您展示如何从不同类型的输入中删除蓝色晕光.所有输入类型都由DIV包装,可容纳主要类.因此,应该使用任何自定义类添加到该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');
 }
});

Answer 2

如果你想删除它,请使用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/

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