如何移除jQuery Mobile折叠面板点击时的蓝色光晕效果？

我太懂这种挫败感了——jQuery Mobile的组件自带样式优先级真的很顽固，尤其是这个点击后冒出来的蓝色光晕（box-shadow），试了好几种方法都没效果对吧？

问题根源 #

你之前的CSS没生效，大概率是因为没选中正确的元素状态，或者样式优先级没干过jQuery Mobile的内置样式。折叠面板的头部按钮点击时，会被自动添加ui-btn-active类，同时触发:focus状态，这俩状态下的box-shadow才是你要去掉的核心目标。

正确的CSS解决方案 #

直接用下面这段代码，精准覆盖默认的高亮样式：

/* 针对折叠面板头部的触发按钮，去掉点击/聚焦时的光晕 */
.ui-collapsible-heading-toggle:focus,
.ui-collapsible-heading-toggle.ui-btn-active {
    box-shadow: none !important;
    outline: none !important;
}

为什么这个能生效？ #

• 精确命中了折叠面板的头部触发按钮（.ui-collapsible-heading-toggle）
• 同时覆盖了:focus（鼠标点击后的聚焦状态）和ui-btn-active（jQuery Mobile自动添加的激活类）两种场景
• !important用来强制覆盖jQuery Mobile内置的高优先级样式（如果你的CSS加载顺序在jQuery Mobile样式之后，也可以尝试去掉!important）

可选：针对特定折叠面板生效 #

如果不想全局去掉所有折叠面板的光晕，只想针对某个特定面板，可以加上ID限定：

/* 替换成你的折叠面板实际ID */
#my-target-collapsible .ui-collapsible-heading-toggle:focus,
#my-target-collapsible .ui-collapsible-heading-toggle.ui-btn-active {
    box-shadow: none;
    outline: none;
}

内容的提问来源于stack exchange，提问作者Gabriel