css – 自定义输入[type =“submit”]样式不能使用jquerymobile按钮

我想在jquerymobiles按钮输入[type =“submit”]按钮时使用我的自定义样式,但它不工作.
我的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>

解决方法

jQuery Mobile> = 1.4

创建一个自定义类,例如.custom-BTN.请注意,为了覆盖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;
}

添加一个数据包装类进行输入.自定义类将被添加到输入包装div.

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

07000

jQuery Mobile< = 1.3 输入按钮由带有ui-btn类的DIV包装.您需要选择该div和输入[type =“submit”].使用！important对于覆盖Jquery Mobile样式至关重要.

07001

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