覆盖jQuery移动按钮样式

Question

我使用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" />  

如果我把这个类添加到其他alement（，

工作更好。

我怎么覆盖任何buttoms的风格？

我可以在jquery.mobile-1.3.2.css之后加载我的css文件？ 最后一个问题：为什么我的css样式忽略了覆盖jquery移动类？ 如果我添加！对我的CSS中的所有属性都很重要。

Answer 1

在自定义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;
}