0

我使用 jQuery mobile 创建项目并且在添加自定义按钮时遇到问题。例如http://jsfiddle.net/W4LWz/2/

我尝试在任何地方添加我的自定义按钮，但我的 css 样式 ingore 并且我看到了标准的 jQ 移动按钮。

我的css文件包括：

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #cccccc;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-primary {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #beddef;
  background-image: -moz-linear-gradient(top, #beddef, #a3c4d6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#beddef), to(#a3c4d6));
  background-image: -webkit-linear-gradient(top, #beddef, #a3c4d6);
  background-image: -o-linear-gradient(top, #beddef, #a3c4d6);
  background-image: linear-gradient(to bottom, #beddef, #a3c4d6);
  background-repeat: repeat-x;
  border-color: #a3c4d6 #a3c4d6 #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

并将这些类添加到我的按钮：

<input class="btn btn-primary" type="button" name="Click me" value="Button" />

如果我将此类添加到其他元素（，

) 工作得更好。

我如何覆盖任何按钮的样式？

我可以在 jquery.mobile-1.3.2.css 之后加载我的 css 文件吗？最后一个问题：如果覆盖 jquery 移动类，为什么我的 css 样式会忽略？如果我为我的 CSS 中的所有属性添加 !important ，则只能工作。

4

1 回答 1

2

在自定义 jQuery Mobile 按钮之前，您需要了解 jQuery Mobile 的工作原理。当页面处于活动状态时，您的输入按钮不再存在，它们被 jQuery Mobile 制作的自定义 HTML 结构所取代。

它也称为标记增强过程。

这是您的按钮在 jQuery Mobile 增强后的外观：

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="null" data-iconpos="null" data-theme="c" data-inline="true" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-inline ui-btn-up-c" aria-disabled="false">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Button</span>
    </span>
    <input type="button" value="Button" name="Click me" data-inline="true" class="btn btn-primary ui-btn-hidden" aria-disabled="false"/>
</div>

新按钮标记不会继承旧按钮标记。因此，您将需要更改新按钮CSS。

此外，在更改新按钮时，CSS您需要使用!important，没有它您将无法覆盖原始按钮CSS。

这是一个简短的例子：http: //jsfiddle.net/Gajotres/W4LWz/3/

CSS：

.ui-btn {
    height: 300px !important;
    width: 300px !important;
}
于 2013-09-09T13:49:22.037 回答