1

我目前在使用 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 可以删除该框？

4

2 回答 2

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;
}
于 2013-12-05T10:02:02.627 回答
1

找到了解决方案，但我对它为什么真的有效感到非常困惑。正如@Mark 提到的，jQuery Mobile 中的按钮是一个盒子阴影。我没有考虑这一点，因为我正在使用自己的按钮类。正如我原来的问题中的标记所见。我只是尝试过，结果证明，添加

box-shadow: none;

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

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

编辑 ：

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

于 2013-12-05T10:26:27.280 回答