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;    
}

覆盖jquery移动样式

1 个答案: