自定义输入[type=“submit”]样式不能使用jquerymobile按钮
自定义输入[type=“submit”]样式不能使用jquerymobile按钮
提问于 2013-03-28 15:33:55
我想使用我的自定义样式的inputtype=“提交”按钮与jquerymobiles按钮，但它不工作。我的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>回答 2
Stack Overflow用户
回答已采纳
发布于 2013-03-28 17:31:19
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;
}向input添加data-wrapper-class。自定义类将被添加到input包装目录中。
<input type="button" data-wrapper-class="custom-btn">jQuery移动<= 1.3
Input按钮由一个类为ui-btn的DIV包住。您需要选择该div和input[type="submit"]。要覆盖Jquery Mobile样式，必须使用!important。
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;
}Stack Overflow用户
发布于 2013-03-28 16:14:30
我假设你不能使用锚标签让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;
}这是
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15676447
复制相关文章
相似问题
腾讯云开发者
