jQuery Mobile で、buttonの高さを変更したい。

Question

###前提・実現したいこと
jQuery Mobile で、buttonの高さを変更したい。

###発生している問題

jqueryUIを読み込み後、
buttonの高さを調整しても、反映されない。
###該当のソースコード

<button class="butContent1">Click Me!</button>

.butContent1{
width:120px;
height:80px;
}

###試したこと
いろいろな指定

• IDにしてみる
• divで囲ってみる
• 外部スタイルシートを使う

###補足
HTML5/jQuery Mobile/CSS3
GoogleChrome/Mozila Firefox

Answer 1

以下のように書き換えてみてください。

.butContent1{
width:120px !important;
height:80px !important;
}

!importantをつけた場合、スタイル適用順序の上位に移動されます。スタイルの適用順序は以下のように決定されます。

↑優先度高

• タグのstyle属性で指定
• 同HTML内のstyleタグで指定
• 外部CSSで指定

優先度低
↓

他にもstyleの優先順序はセレクタの要素の数にも左右されますが、!importantがついていれば、!importantなしよりも優先度が高くなります。とりあえず!importantをつけてみて、適用されれば優先度の問題、適用されなければなにか別の問題だと思われます。

Comments

[退会済みユーザー]

!important すごっ！

[vsmorse]

ありがとうございます！成功しました。