CSS 如何从接收焦点的 jQuery Mobile 输入元素中移除蓝色光晕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16972701/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove the blue halo glow from jQuery Mobile input elements that receive focus
提问by Cole
I'm encountering the same problem as listed in:
我遇到了与以下所列相同的问题：
JQuery Mobile: how to not display the button focus halo when a button is clicked?
JQuery Mobile：如何在单击按钮时不显示按钮焦点光环？
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?
但是，我尝试了“codaniel”所接受的答案，该答案非常有效，除非您希望相关项目保留常规阴影 - 只是不是蓝色光晕模糊。当您将他的回答中显示的 CSS 规则应用于这些选择器时，它会移除焦点上的所有内容 - 包括所需的正常投影。任何想法如何将所需的（黑色）阴影保持在焦点上但失去蓝色光晕？
Thanks in advance! Cole
提前致谢！油菜
回答by Omar
Use the below CSS to override/remove the shadow.
使用下面的 CSS 来覆盖/删除阴影。
.ui-focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
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.
这将从所有输入元素中删除阴影。但是，如果需要，您可以将其作为类添加到特定元素/输入类型。假设类名是noshadow.
Update
更新
I made a demoto 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').
我做了一个演示，向您展示如何从不同类型的输入中去除蓝色光晕。所有输入类型都由一个 DIV 包装，该 DIV 可容纳主要类。因此，任何自定义类都应该使用.closest('div').
The below code removes blue shadow / adds .noshadowto input type=emailonly, leaving other inputs untouched.
下面的代码删除蓝色阴影/仅添加.noshadow到输入type=email，其他输入保持不变。
$(document).on('focus', 'input', function () {
if ($(this).hasClass('ui-input-text') && $(this).attr('type') == 'number') {
$(this).closest('div').addClass('noshadow');
}
});
I used ui-input-textto identify the input as all inputs have that class. However, it is different for input type=searchas it has an additional class .ui-input-searchand data-type=searchunlike other inputs. So it requires different procedure to add custom class to it, this way.
我曾经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');
}
});
回答by Gajotres
If you want to remove it go with Omar'sanswer.
如果您想删除它，请使用Omar 的答案。
If you want to have a shadow but of different color you need to change and override shadow color, like this:
如果你想要一个不同颜色的阴影，你需要改变和覆盖阴影颜色，像这样：
.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;
}
Working example: http://jsfiddle.net/Gajotres/ywraY/
工作示例：http: //jsfiddle.net/Gajotres/ywraY/
Don't forget to use !important, this is the only way original CSScan be overridden. This CSSwill cover every input element. You only need to find color that best suites you.
不要忘记使用 !important，这是CSS覆盖original 的唯一方法。这CSS将涵盖每个输入元素。您只需要找到最适合您的颜色即可。
回答by Goran Lepur
Just write down regular shadow instead of no shadow.
只需写下常规阴影而不是没有阴影。
.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;
}
Or use some other shadow of your choice.
或者使用您选择的其他阴影。
回答by Ecommerce Concierge
Had it on multipe types of elements and this is what fixed it for me
有它在多种类型的元素上，这就是为我修复它的原因
* {
outline: none;
}
