Question

我在标题中的主页按钮顶部添加了填充。现在我想从主页按钮的顶部禁用渐变效果。我其实想要一个普通的彩色按钮。主页按钮应该提供纯色，没有像效果一样的顶部阴影。请参阅下面的示例

<style>
.ui-btn-left{
    padding-top:10px;
}
</style>
<div data-role="header" data-position="inline">
     <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false" data-direction="reverse"  data-transition="slide" class="ui-btn-left">home</a>
    <h1>Resultaten</h1>    
</div>

http://jsfiddle.net/3EgrW/1404/

Answer 1

您需要找到css中确切位置的颜色（渐变）。在您发布的示例中，ui按钮正在从jquery.mobile.css文件中获取样式 - 您需要使用自己的样式覆盖该样式。来源 - 元素检查员

Answer 2

事实上，jQuery mobile通过创建一个名为.ui-btn-inner的内部跨度来修改HTML代码，此span包含另外两个名为.ui-btn-text和.ui-icon的跨度。因此，当您在padding-top元素上设置a时，整个内部范围.ui-btn-inner将被拉下并且样式仍然受到影响，使得文本上方出现丑陋的渐变。因此，您必须在padding-top上设置a，而不是在.ui-btn-inner元素上设置.ui-icon。然而，它不是那么简单，static定位绝对导致问题，以对齐按钮文本和按钮图标。所以我尝试将位置设置为#header-right-button .ui-btn-inner { padding-left:5px; padding-top:13px; } #header-right-button .ui-icon { position:static; float:left; margin:0; margin-right:5px; } #header-right-button { height:80px; }，将其浮动到左侧，相应地调整边距......这是CSS：

border:none

Demo.

如果要删除渐变边框，请尝试在.ui-btn-inner上设置padding-top。这是Demo.。幸运的是，如果你只是想要这个，我们有一个更简单的代码，因为你可以在#header-right-button上设置#header-right-button { padding-top:10px; height:80px; } #header-right-button > .ui-btn-inner { border:none; }：

{{1}}

如何从jquery mobile中的ui-button-right顶部删除颜色渐变？

2 个答案:

Demo.

Demo 2