Jquery MobileをオーバーライドCSS

Question

別のカスタムCSSファイルを使用して、既にスタイル付けされたJQuery Mobile要素（ボタン、リストなど）をオーバーライドすることはできますか？

は、もしそうなら、どのように要素を参照して行くでしょう。

おかげ

Answer 1

は後を含まjQueryのモバイルいずれか

.uiヘッダ.uiタイトル{マージン右：20ピクセル;マージン左：20ピクセル;}

.ui-フッタ.uiタイトル{マージン右：20ピクセル、マージン-left：20ピクセル;空白：正常;}

また、放火犯とDEV。ツール（クロム）はあなたの友人です - 要素とそのスタイルを調べます。

リビー

Answer 2

はいあなたは既にjQueryのモバイルで定義されているすべてのCSSスタイルをオーバーライドするが、良い方法でそれを行う方法について見てみることができます。 jQueryドキュメントのTheming overviewには、あなたの質問に参照される情報があります。特に：

オーバーライドテーマ

テーマは固体の出発点として意図されているが、あなたのサイトや アプリ独自のを作るカスタム設計要素を追加してカスタマイズし であることを意味しています。すべてがCSSによって制御されるため、 ウェブインスペクタツールを使用して、 に変更するスタイルプロパティを簡単に識別できます。テーマクラス（グローバル）とセマンティック構造のセット（要素に追加されたクラス（ウィジェット固有））は、 の可能なセレクタを使用して、スタイルのオーバーライドを対象にします。 我々は、すべてあなたのスタイル 上書きが含まれている構造 やテーマスタイルシートの参照、後に置かヘッドへの外部スタイルシートを追加 をお勧めします。オーバーライドはライブラリコードとは別に保持されるため、これにより、 ライブラリの新しいバージョンに簡単に更新できます。その後の.cssファイルに次のようなものを追加し、私は、公式のそれを行うためのエレガントな方法を知らないが、私はクラスを見つけるために、非分のCSSファイルを調べ

Answer 3

SO含めて、私はどこにでも発見したJQMを使用して独自のスタイルを使用する方法についての巨大な誤解があります。独自のCSSをJQMで使用するための秘訣は、独自のCSSを書く方法です。一般的には、JQM CSSを上書きしたい要素をidで指定してから、そのIDにJQMクラスを付加する必要があります。たとえば、イメージリンクからJQM標準リンクボーダーCSSを削除するには、＃img_button_1がイメージのアンカー親に与えられたIDであるとします。

HTML ...

<a id="img_button_1" data-role="button" data-theme="none" data-corners="false" data-shadow="false" data-inline="true" 
    href="http://www.google.com" target="_blank"> 
    <img src="http://www.google.com/images/srpr/logo1w.png" alt="Google" /> 
</a> 

あなたのオーバーライドCSS ...

#img_button_1 .ui-btn-inner { border: 0 } 

私はここ

Jquery Mobile - Using image as link - Blue line below image

あなたはすべてのあなたのJQMのCSSの競合を解決するために同じ技術を使用することができます見つけることができるいくつかの作業実施例で前にこれを答えました。 JQMを使用して、自分のCSSでCSSの特異性を使用してこれらの競合を簡単に解決できることを知っているあなたの望む結果を再考することができます。お役に立てれば！

Answer 4

新しいバージョンごとにリリースノートを必ず確認してください。

CSS階層の変更点については有用な情報があります。もちろん、これは一般的に各リリースでより安定しますが、おそらくあなたが知る必要があるものになるでしょう。

1.4 CSSのアップグレードドキュメント： http://jquerymobile.com/upgrade-guide/1.4/#override-with-custom-css