自定义输入 [type="submit"] 样式不适用于 jquerymobile 按钮答案

【问题标题】：Custom Input[type="submit"] style not working with jquerymobile button自定义输入 [type="submit"] 样式不适用于 jquerymobile 按钮
【发布时间】：2013-03-18 13:44:48
【问题描述】：

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

【问题讨论】：

.selected_btn 的 css 是什么？
用开发者工具检查它是否应用了样式，如果是，是否被其他样式覆盖
@Dipesh，.selected_btn 的样式相同
@pfied，类它不适用

标签： css html jquery-mobile

【解决方案1】：

jQuery 移动 >= 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 移动

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

【讨论】：

尽管这是一篇旧帖子，但重要的是要注意您不应该使用 !important，尝试进一步访问家谱。像表单输入[type="submit"]。否则，您将有一段地狱般的时间稍后更新您的 CSS。 css-tricks.com/when-using-important-is-the-right-choice
@MrBandersnatch 感谢您的来信。在 JQM 中，您有两种选择来覆盖默认样式，通过添加 !important 或在创建页面后添加自定义类。此解决方案删除了不需要的额外样式，当您改变主意时，您可以轻松找到它们:)

【解决方案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

【讨论】：