jQuery移动如何删除图标上的灰色圆圈

Question

我构建了我的第一个phonegap Jquery Appl我使用此类更改我的图标

.ui-icon-myapp-email {
    background-image: url("app-icon-email.png");
}

此自定义图标用于列表视图，我尝试删除圆形灰色背景负载另外我的照片对于形状来说有点大我正在使用 .ui 图标，但不起作用找不到类

我只想我的自定义箭头图片在白色背景列表上全尺寸没有圆形没有圆形框形状也许有一个属性或通过 css 来做到这一点谢谢

Answer 1

如果您使用的是jQuery v 1.4.0 +，那么您只需要将类.ui-nodisc-icon添加到链接元素中即可删除该烦人的圆圈。您无需编辑任何 css 或编写任何覆盖。

Answer 2

这里来晚了，但一个简单的答案是添加

background-color: transparent;
box-shadow: none;

到您的自定义类名，因此：

.ui-icon-myapp-email {
    background-color: transparent;
    box-shadow: none;
}

是你所需要的一切。

Answer 3

使用 JQuery Mobile 1.3，现在您所要做的就是添加类 "ui-nodisc-icon"，无需弄乱 CSS。

来自JQuery网站：

"如果你不需要图标后面的黑圈，只需将ui-nodisc-icon添加到元素或其容器中即可删除图标背景。

Answer 4

这应该有效。

.ui-icon-myapp-email {
    background:transparent; /* or none */
    background-image: url("app-icon-email.png");
    /* The following border radius rules will override the circle around your icon */
    -moz-border-radius: 0px;
    -webkit-border-radius:0px;
    border-radius:0px;
}
/* To fix the size issue override the .ui-icon height */
.ui-icon{
    width:14px;
    height:20px;
}

Answer 5

将图标光盘颜色覆盖为白色。

.ui-icon,
.ui-icon-searchfield:after {
    background: #fff /*{global-icon-color}*/;
    background: rgba(255,255,255,1) /*{global-icon-disc}*/;
    background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
    background-repeat: no-repeat;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
}

图标大小在ui-icon类中指定，该类默认为 18px 。

.ui-icon {
    width: 19px;
    height: 19px;
}

Answer 6

对于那些只想为按钮设置图标的人 - 我发现这篇文章非常有用！我按照"重置按钮主题"和"仅图标按钮"部分来获得我需要的效果。

http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/

Answer 7

我解决了这个问题，使用：

background-color:transparent;

如果要在背景中添加颜色，可以使用：

background: url(yourimage.png) repeat;