jquerymobile：摆脱图标阴影

我目前在jquerymobile背后的css方面遇到了麻烦。我有一个按钮，在html中定义如下：

<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="a">
    <a href="#" class="previous" data-role="cus-button" data-shadow="false"></a>
    <a href="#" class="play playpause" data-role="cus-button" data-shadow="false"></a>
    <a href="#" class="stop" data-role="cus-button" data-shadow="false"></a>
    <a href="#" class="forward" data-role="cus-button" data-shadow="false"></a>
</div>

这将删除图标周围的正方形，但每次单击按钮时，我仍然会在背景中看到一个框，该框会被蓝色阴影高亮显示：

奇怪的是，一个类似的按钮，不在网站的页脚区域，有相同的css，没有提到的阴影

它们的定义如下：

<div id="controls-left">
     <a href="#" id="repeat" class="repeat" data-role="cus-button"></a>
     <a href="#" id="repeat-all" class="repeat-all" data-role="cus-button"></a>
     <a href="#" id="random" class="random" data-role="cus-button"></a>                    
</div>

---

是否有任何特定于jquery mobile的css会删除该框？

它看起来像是由css设置样式的活动状态，请使用FireBug或chrome/Safari inspector查看在活动状态中应用的样式，并在css中否决它

在这里，我是为你做的：

所以归根结底是这样的：

.ui-focus, .ui-btn:focus {
  box-shadow: 0 0 3px #387BBE inset, 0 0 9px #387BBE;
}

应当加以管制：

.ui-focus, .ui-btn:focus {
  box-shadow: none;
}

---

找到了解决方案，但我非常困惑它为什么会起作用。正如@Mark提到的，jquerymobile中的按钮有一个方框阴影。我没有想到这一点，因为我正在使用自己的button类。正如我最初问题中的标记所示。 我只是试了一下，结果是

box-shadow: none;

我的按钮类的css实际上是有效的。在我看来，这是jQuery mobile的一个巨大缺点（考虑到您也在使用他们的css）。它做很多事情都是正确的，并且很容易配置，但是一旦你想更改一个特定的css属性（在他们的主题栏之外），你就必须深入挖掘并首先使用webdeveloper工具

无论如何，事情就是这样做的

编辑：

---

如@Omar所述，页眉和页脚中的锚定将自动变成按钮。这就解释了为什么我需要框阴影。

也许也可以试试“数据图标阴影”？对不起，我应该提到这一点。我确实试过了。但没有任何效果。请在页脚中张贴所有按钮的标记。你使用的是

data role=“navbar”

？我复制了你的问题，它在chrome桌面和iphone上都可以正常工作，除非涉及更多代码。这也可能是一个浏览器问题。编辑：页眉和页脚自动将锚定转换为按钮。在我的回答中添加了有关页眉和页脚锚定的提示。OP不使用

data role=button

。甚至没有

按钮

标签。您的答案适用于

按钮

标记和

数据角色=“按钮”

数据角色=“cus按钮”

不受jqm支持，它保持不变，如

数据角色=“无”

。别忘了！没有背后的重要。@swen:没有必要！重要的是，如果是否决，这就是否决的目的，第二个css属性否决第一个属性值得一提的是，它发生在IE和FF上。Chrome和Safari mobile都不错。

.ui-focus, .ui-btn:focus {
  box-shadow: none;
}

box-shadow: none;