css - 覆盖 jquery 移动样式

Question

我的 html 文档中有一个表单，其中包含一个提交按钮，如下所示:

<input type="submit" value="submit"/>

无论我尝试什么，我都无法覆盖 Jquery Mobile 样式。

有什么建议吗？

Answer 1

在更改 jQuery Mobile 中的任何内容之前，您需要了解一件事。当页面显示时，您编写的 HTML 将不存在。

jQuery Mobile 使用额外的 HTML/CSS 结构增强了页面标记。如果使用此按钮:

<input type="submit" value="submit"/>

它的最终 HTML 看起来像这样:

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-disabled="false" class="ui-submit ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">submit</span>
    </span>
    <input type="submit" value="submit" class="ui-btn-hidden" data-disabled="false"/>
</div>

因此，当更改 jQuery Mobile 元素 CSS 时，您需要更改最终结果，而不是初始 HTML。应用于原始元素的 CSS 样式不会复制到新元素。

工作 jsFiddle 示例:http://jsfiddle.net/Gajotres/6dWkV/

最后一件事，当更改 jQuery Mobile 样式时，不要忘记使用 !important 来覆盖原始样式。

最终 CSS:

.ui-submit {
    position: relative !important;
    float: right !important;
    background: red !important;
    height: 300px !important;
    width: 300px !important;    
}