jQuery Mobileはボタンのui-btn-innerクラスを選択的にオーバーライドしますか？

Question

だから、それがページ上のクラスをオーバーライドすることにより、ボタンのパディングを削除する方法についてここで詳しく説明です：Can the button padding be adjusted in Jquery Mobile?

しかし、どのように私はこの取るん：

.ui-btn-inner { 
padding: 0;} 

を選択的に一つのボタン、すなわちに適用します：

<button data-icon="false" onclick="alert('clicked me')">Button Name</button> 

このような何かを行うことは動作しません：

<button style="padding:0" data-icon="false" onclick="alert('clicked me')">Button Name</button> 

思考？創造的なソリューション？

おかげ

Answer 1

私は私が最終的に解決策を見つけたと思うが（今しばらくの間、それを理解しようとして）！

CSSの「カスケード」部分を使用してください。たとえば、ボタンがテーマ 'a'を使用している場合は、テーマ「a」のボタンにのみ.ui-btn-innerのパディングルールを適用できます。変更しようとしているクラスの前に、themedプロパティを置いてください。

HTML：
<a href"#/mypath" data-role="button" data-theme="a">Touch Me</a>

CSS：あなたが見ることができるように、これは、あなたがボタンの状態ごとにルールを作成しなければならないことを意味
.ui-btn-up-a .ui-btn-inner,
.ui-btn-hover-a .ui-btn-inner,
.ui-btn-down-a .ui-btn-inner
{ padding: 0px; }

そうパディングは、分割のために戻りますあなたがボタンに触れると、秒。

パディングを維持するボタンに別のテーマ（「b」など）を適用するだけです。このタイプのCSS継承を使用して、ボタンで完全にナットすることができます。

テーマの数に制限はありません。テーマローラーに行き、アルファベットのすべての文字のデフォルトテーマを作成します。それから、私の心のコンテンツにCSSでそれらを上書きするだけです。

これは、仕事用プロジェクトでjQuery Mobileを使用しようとしたときに大きな問題でした。彼らはすでにUIデザインを持っていて、jQuery Mobileを正確に一致させることを任されました。

Answer 2

ボタンの新しいクラスを設定してから、以下のようにサブクラスを変更してください。

HTML：

<a href"#" data-role="button" class="myClass">Text</a> 

CSS：

.myClass .ui-btn-inner{ 
    padding: 0px; 
} 

Answer 3

は、私はちょうど私があなたの例を使用していない境界線や背景に表示するアイコンを望んでいたが、アイコンがシフトアップしましたので、私が使用して、このそれを再配置する：

.ui-btn-up-mytheme .ui-btn-inner, 
.ui-btn-hover-mytheme .ui-btn-inner, 
.ui-btn-down-mytheme .ui-btn-inner { 
margin-top: 2px; 
border: none; 
} 

をHTMLマークアップ：

<a href="schedules" data-rel="back" data-icon="arrow-l" data-iconpos="notext" 
data-theme="mytheme" data-shadow="false" ></a>