jquery-mobile：摆脱图标阴影

Question

我目前在使用jQuery-Mobile背后的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>

编辑：还尝试使用data-iconshadow，但没有效果。

通过使用以下css，我能够删除个人背景图像周围的方块：

background-size: 100% !important;
background-repeat: no-repeat;
background-color: transparent;

display: inline-block !important;
height: 62%;
width: 10%;
margin-top: 2% !important;

border: 0;
border-radius: 0 !important;
outline: none !important;
text-decoration: none;

这会删除图标周围的方框，但每次单击按钮时，我仍会在背景中看到一个用蓝色阴影突出显示的框：

关于这个的奇怪部分是，一个类似的按钮，不在网站的页脚区域并具有相同的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>

这是他们的css：

#controls-left a[data-role="cus-button"]{
    position: relative;
    background-size: 95% !important;
    background-repeat: no-repeat;
    background-color: transparent;

    display: block !important;
    height: 40px;
    width: 40px;

    left: 0;
    right: 0;
    margin: auto;

    border: 0px !important;
    border-radius: 0 !important;
    outline: none !important;
    text-decoration: none;
}

是否有任何jquery-mobile特定的css，将删除该框？

Answer 1

它看起来像是由CSS设置样式的活动状态，使用FireBug或chrome / Safari检查器来查看在活动状态中应用的样式，并在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;
}

Answer 2

找到解决方案，但我非常困惑为什么它实际上有效。正如@Mark所提到的，jQuery Mobile中的按钮是一个盒子阴影。我没有想到这一点，因为我正在使用自己的按钮级。正如我原来问题中的标记所示。 我只是尝试了，事实证明，添加

box-shadow: none;

我的按钮类的CSS实际上工作。在我看来，这是jQuery mobile的一个巨大缺点（鉴于你正在使用他们的css）。它做了很多事情并且很容易配置，但是一旦你想要改变一个特定的css属性（在他们的主题 - 滚动的可能性之外），你必须深入挖掘并首先使用webdeveloper工具。

无论如何这就是它的完成方式。

编辑：

正如@Omar锚点在页眉中提到的那样，页脚会自动变成按钮。这就解释了为什么我需要盒子阴影。