自定义输入 [type="submit"] 样式不适用于 jquerymobile 按钮 [英] Custom Input[type="submit"] style not working with jquerymobile button

问题描述

我想在带有 jquerymobiles 按钮的 input[type="submit"] 按钮上使用我的自定义样式，但它不起作用.我的 html 代码是:

我的css代码是:

input[type="submit"]{边框:1px 纯红色；文字装饰:无；字体系列:黑体字；红色;背景:url(../images/btn_hover.png)repeat-x；}

当我使用以下 html 代码时，同样的样式适用:

<a href="#" class="selected_btn" data-role="button">按钮名称</a>

解决方案

jQuery Mobile >= 1.4

创建自定义类，例如.custom-btn.请注意，要在不使用 !important 的情况下覆盖 jQM 样式，应遵守 CSS 层次结构..ui-btn.custom-class 或 .ui-input-btn.custom-class.

.ui-input-btn.custom-btn {边框:1px 纯红色；文字装饰:无；字体系列:黑体字；红色;背景:url(img.png)repeat-x；}

将 data-wrapper-class 添加到 input.自定义类将被添加到 input 包装 div.

<块引用>

演示

---

jQuery Mobile <= 1.3

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

<块引用>

演示

div.ui-btn, input[type="submit"] {边框:1px 纯红色！重要；文字装饰:无！重要；font-family:helvetica !important;颜色:红色！重要；背景:url(../images/btn_hover.png)repeat-x !important;}

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">

My css code is:

input[type="submit"]
{
    border:1px solid red;
    text-decoration:none;
    font-family:helvetica;
    color:red;
    background:url(../images/btn_hover.png) repeat-x;
}

Same style applies when I use following html code:

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

解决方案

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

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

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.

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

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