覆盖jQuery Mobile的造型

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