css - jquery モバイル スタイルをオーバーライドする

Question

次のような送信ボタンを含むフォームが HTML ドキュメントに含まれています。

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

何を試しても、Jquery Mobile スタイルをオーバーライドできません。

助言がありますか？

Answer 1

jQuery Mobile で何かを変更する前に、1 つのことを理解する必要があります。作成した 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/

!important最後にもう 1 つ、jQuery Mobile のスタイルを変更するときは、使用して元のスタイルをオーバーライドすることを忘れないでください。

最終的な CSS:

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