18

input[type="submit"] ボタンと jquerymobiles ボタンでカスタム スタイルを使用したいのですが、うまくいきません。私のhtmlコードは次のとおりです。

<input type="submit"  value="Button name">

私のcssコードは次のとおりです。

input[type="submit"]
{
    border:1px solid red;
    text-decoration:none;
    font-family:helvetica;
    color:red;
    background:url(../images/btn_hover.png) repeat-x;
}

次の html コードを使用すると、同じスタイルが適用されます。

<a href="#" class="selected_btn" data-role="button">Button name</a>
4

2 に答える 2

22

jQuery モバイル >= 1.4

カスタム クラスを作成します.custom-btn。を使用せずに jQM スタイルをオーバーライドする!importantには、CSS 階層を尊重する必要があることに注意してください。.ui-btn.custom-classまたは.ui-input-btn.custom-class。

.ui-input-btn.custom-btn {
   border:1px solid red;
   text-decoration:none;
   font-family:helvetica;
   color:red;
   background:url(img.png) repeat-x;
}

に を追加data-wrapper-classしinputます。カスタム クラスはinputラッピング div に追加されます。

<input type="button" data-wrapper-class="custom-btn">

デモ

jQuery モバイル <= 1.3

Inputボタンは class の DIV でラップされますui-btn。その div とinput[type="submit"]. !importantJquery Mobile スタイルをオーバーライドするには、使用が不可欠です。

デモ

div.ui-btn, input[type="submit"] {
 border:1px solid red !important;
 text-decoration:none !important;
 font-family:helvetica !important;
 color:red !important;
 background:url(../images/btn_hover.png) repeat-x !important;
}
于 2013-03-28T09:31:18.983 に答える
0

アンカータグを使用してボタンに対してcssを機能させることはできないと思います。そのため、プロパティを使用して他の要素によって上書きされている css スタイルをオーバーライドする必要があります!important。

HTML

<a href="#" class="selected_btn" data-role="button">Button name</a>

CSS

.selected_btn
{
    border:1px solid red;
    text-decoration:none;
    font-family:helvetica;
    color:red !important;            
    background:url('http://www.lessardstephens.com/layout/images/slideshow_big.png') repeat-x;
}

ここにデモがあります

于 2013-03-28T08:14:29.737 に答える