Html 自定义输入 [type="submit"] 样式不适用于 jquerymobile 按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15676447/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom Input[type="submit"] style not working with jquerymobile button
提问by Prasad
I want to use my custom style on input[type="submit"] button with jquerymobiles button but it is not working. My html code is:
我想在带有 jquerymobiles 按钮的 input[type="submit"] 按钮上使用我的自定义样式，但它不起作用。我的html代码是：
<input type="submit" value="Button name">
My css code is:
我的 css 代码是：
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:
当我使用以下 html 代码时，同样的风格适用：
<a href="#" class="selected_btn" data-role="button">Button name</a>
回答by Omar
jQuery Mobile >= 1.4
jQuery 移动 >= 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-classor .ui-input-btn.custom-class.
创建一个自定义类，例如.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;
}
Add a data-wrapper-classto input. The custom class will be added to inputwrapping div.
添加一个data-wrapper-class到input. 自定义类将被添加到input包装 div。
<input type="button" data-wrapper-class="custom-btn">
jQuery Mobile <= 1.3
jQuery 移动 <= 1.3
Inputbutton is wrapped by a DIV with class ui-btn. You need to select that div and the input[type="submit"]. Using !importantis essential to override Jquery Mobile styles.
Input按钮由一个带有 class 的 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;
}
回答by Eli
I'm assume you cannot get css working for your button using anchor tag. So you need to override the css styles which are being overwritten by other elements using !importantproperty.
我假设您无法使用锚标记使 css 为您的按钮工作。因此，您需要使用!important属性来覆盖被其他元素覆盖的 css 样式。
HTML
HTML
<a href="#" class="selected_btn" data-role="button">Button name</a>
CSS
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;
}
Here is the demo
这是演示
