我构建了我的第一个 phonegap Jquery Appl 我正在使用此类更改我的图标
.ui-icon-myapp-email {
background-image: url("app-icon-email.png");
}
此自定义图标用于列表视图,我尝试删除圆形灰色背景负载此外,我的图片对于我正在使用 .ui-icon 玩的形状有点大,但不起作用找不到类
我只是想要我的自定义箭头图片全尺寸在白色背景列表上没有圆形没有圆形框形状也许有一个属性或通过 css 来制作谢谢
我构建了我的第一个 phonegap Jquery Appl 我正在使用此类更改我的图标
.ui-icon-myapp-email {
background-image: url("app-icon-email.png");
}
此自定义图标用于列表视图,我尝试删除圆形灰色背景负载此外,我的图片对于我正在使用 .ui-icon 玩的形状有点大,但不起作用找不到类
我只是想要我的自定义箭头图片全尺寸在白色背景列表上没有圆形没有圆形框形状也许有一个属性或通过 css 来制作谢谢
如果您使用的是 jQuery v 1.4.0 +,那么您只需将该类添加.ui-nodisc-icon
到您的链接元素中即可移除那个烦人的圆圈。您无需编辑任何 CSS 或编写任何覆盖。
在这里聚会迟到了,但一个简单的答案是添加
background-color: transparent;
box-shadow: none;
到您的自定义类名,所以:
.ui-icon-myapp-email {
background-color: transparent;
box-shadow: none;
}
是你所需要的全部。
使用 JQuery Mobile 1.3,现在您所要做的就是添加类 "ui-nodisc-icon",无需乱用 CSS。
来自JQuery 网站:
“如果您不需要图标后面的黑圈,只需将 ui-nodisc-icon 添加到元素或其容器中即可移除图标背景。”
这应该有效。
.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;
}
将图标光盘颜色覆盖为白色。
.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;
}
对于那些只想拥有按钮图标的人 - 我发现这篇文章非常有用!我按照“重置按钮主题”和“仅图标按钮”部分来获得我需要的效果。
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
我解决了这个问题,使用:
background-color:transparent;
如果要在背景中添加颜色,可以使用:
background: url(yourimage.png) repeat;