web-dev-qa-db-ja.com

jQuerymobileボタンでカスタム入力[type = "submit"]スタイルが機能しない

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>
csshtml5jquery-mobile
18
Prasad

jQuery Mobile> = 1.4

カスタムクラスを作成します。 .custom-btn。 !importantを使用せずにjQMスタイルをオーバーライドするには、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 Mobile <= 1.3

Inputボタンは、クラスui-btnのDIVによってラップされます。そのdivとinput[type="submit"]を選択する必要があります。 Jquery Mobileスタイルをオーバーライドするには、!importantを使用することが不可欠です。

デモ

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;
}
22
Omar

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

[〜＃〜] 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;
}

これはデモ

0
Eli