自定义输入[type =“submit”]样式无法使用jquerymobile按钮 [英] Custom Input[type="submit"] style not working with jquerymobile button

问题描述

我想使用我的自定义风格的输入[type =submit]按钮与jquerymobiles按钮，但它不工作。
我的HTML代码是：

I want to use my custom style on input[type="submit"] button with jquerymobiles button but it is not working. My html code is:

<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代码时，格式相同：

Same style applies when I use following html code:

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

推荐答案

jQuery Mobile> = 1.4

创建自定义类，例如 .custom-btn 。请注意，为了覆盖jQM样式而不使用！important ，应该遵守CSS层次结构。 .ui-btn.custom-class 或 .ui-input-btn.custom-class 。

jQuery Mobile >= 1.4

Create a custom class, e.g. .custom-btn. Note that to override jQM styles without using !important, CSS hierarchy should be respected. .ui-btn.custom-class or .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 到输入。自定义类将添加到输入包装div。

Add a data-wrapper-class to input. The custom class will be added to input wrapping div.

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

演示

Demo

---

jQuery Mobile< = 1.3

输入按钮由DIV包装， ui-btn 。您需要选择该div和输入[type =submit] 。使用！important 对重写Jquery Mobile样式至关重要。

---

jQuery Mobile <= 1.3

Input button is wrapped by a DIV with class ui-btn. You need to select that div and the input[type="submit"]. Using !important is essential to override Jquery Mobile styles.

演示

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

这篇关于自定义输入[type =“submit”]样式无法使用jquerymobile按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！