Question

我在我的示例项目中使用jQuery mobile。我有三个按钮。我正在改变按钮的样式（添加我自己的CSS），以便它覆盖jQuery按钮CSS。但添加它仍然显示一些小的白色背景。我检查页面，发现它是jQuery移动按钮。我无法覆盖该背景。这是我的尝试：http://jsfiddle.net/naveennsit/5DDBD/

.ui-grid-c .ui-btn-inner {
    background: #2b6dbc; 
    color: #FFFFFF; 
    border: 1px solid #000; 
    border-radius: 3px; 
    width: 100px; 
    text-shadow: none; 
    margin-left: 4px; 
}

使用DOM检查器，当我删除此background: 2b6dbc时，它将显示jQuery移动按钮。

如何删除？

添加后，它会改变焦点上的颜色并且不聚焦。

.ui-btn-up-c{background:#2b6dbc; color:#FFFFFF; border:1px solid #000; border-radius:3px; width:100px; text-shadow:none; margin-left:4px;}

Answer 1

直接更改ui-btn：http://jsfiddle.net/5DDBD/5/

.ui-btn {
    background: #2B6DBC;
    text-shadow: none;
}

.ui-btn-inner {
    color:#FFFFFF;
}

Answer 2

CSS继承自“.ui-btn-up-c”类。它在您的“c”主题中定义（data-theme = c）。

这是在Theme Roller jquery Mobile中定义自己的“c”主题的最佳方式。 http://jqueryui.com/themeroller/

或者您可以从“.ui-btn-up-c”更改背景。

Answer 3

将自定义css添加到.ui-btn而不是.ui-btn-inner

.ui-grid-c .ui-btn
{
background:#2b6dbc; 
color:#FFFFFF; 
border:1px solid #000; 
border-radius:3px; 
width:100px; 
text-shadow:none;
margin-left:4px; 
}

见这里.. http://jsfiddle.net/5DDBD/2/

Answer 4

“.ui-grid-c > :nth-child(n)”在jquery.mobile-1.3.0-beta.1.css上，您可以修复它：

.ui-grid-c > :nth-child(n){
/* width: 25% */
margin-right:5px;
border:none;
}

和“.ui-grid-c .ui-btn-inner”删除margin-left:4px属性。

Answer 5

您需要从.ui-grid-c .ui-btn-inner中删除width和margin-left属性。

如何删除jquery移动按钮颜色或覆盖按钮css？

5 个答案: