Question

我构建了我的第一个phonegap Jquery Appl 我正在使用这个类改变我的图标

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

此自定义图标用于列表视图，我尝试删除圆形灰色背景加载我的照片对于形状也有点大我正在玩.ui-icon但不起作用找不到班级

我只想在白色背景列表上自定义箭头图片全尺寸没有圆形没有圆盒形状也许有一个属性或通过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 Website：

“如果您不需要图标后面的黑圈，只需将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;

jquery mobile如何删除图标上的灰色圆圈

7 个答案: