自定义输入[type =“submit”]样式不适用于jquerymobile按钮

Question

我想在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>

Answer 1

jQuery Mobile＆gt; = 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">

  

<强> Demo

---

jQuery Mobile＆lt; = 1.3

Input按钮由类ui-btn的DIV包装。您需要选择该div和input[type="submit"]。使用!important对于覆盖Jquery Mobile样式至关重要。

  

Demo

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

Answer 2

我假设您无法使用锚标记让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;
}

以下是 demo