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手机中的按钮是一个方框阴影。我没有想到这一点，因为我使用的是我自己的button类。正如我最初问题中的标记所示。我刚试过，结果是，添加了

box-shadow: none;

添加到我的按钮类的css中，实际上是有效的。在我看来，这是jQuery手机的一个巨大的缺点(假设你也在使用他们的css )。它做了很多正确的事情并且很容易配置，但是一旦你想要改变一个特定的css属性(在他们的主题滚轮的可能性之外)，你必须深入挖掘并首先使用webdeveloper工具。

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

编辑:

正如@Omar anchors在页眉和页脚中提到的那样，页脚将自动变成按钮。这就解释了为什么我需要长方体阴影。