18

我想在带有 jquerymobiles 按钮的 input[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>
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按钮由具有类的 DIV 包装ui-btn。您需要选择该 div 和input[type="submit"]. 使用!important对于覆盖 Jquery 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 为您的按钮工作。!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;
}

这是演示

于 2013-03-28T08:14:29.737 回答