CODEWITHSUNDEEP
jquery-mobileicons
louminsk
louminsk

Reputation: 99

jquery mobile how remove the grey round circle on icon

I build my first phonegap Jquery Appl Im changing my icon using this class

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

This custom icon is for a list view , and i try to remove the round grey background load Also my picture is a bit big for the shape I was playing with the .ui-icon but doesnt work Cant find the class

I just wanna my custom arrow picture full size on a white background list no round no circle box shape Maybe there is an attribute or via css to make that thanks

Upvotes: 8

Views: 18597

Answers (7)

user2099265
user2099265

Reputation: 11

I solved this issue, using:

background-color:transparent;

if you want to add color in background you can use:

background: url(yourimage.png) repeat;

Upvotes: 0

DevKev
DevKev

Reputation: 6304

If you are using jQuery v 1.4.0 + then you just need to add the class .ui-nodisc-icon to your link element to remove that annoying circle. You will not need to edit any css or write any overrides.

Upvotes: 16

ksloan
ksloan

Reputation: 1492

With JQuery Mobile 1.3, now all you have to do is add the class "ui-nodisc-icon", no need to mess around with the CSS.

from JQuery Website:

"If you don’t need the dark circle behind the icons, simply add the ui-nodisc-icon to the element or its container to remove the icon background."

Upvotes: 4

Yecats
Yecats

Reputation: 1815

For those of you looking to have just an icon for the button - I found this article to be very useful! I followed the "Reset the button theme" and "Icon-only buttons" sections to get the effect that I needed.

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

Upvotes: 0

Grim...
Grim...

Reputation: 16953

Late to the party here, but a simple answer is to add

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

to your custom class name, so:

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

is all you need.

Upvotes: 9

codaniel
codaniel

Reputation: 5253

This should work.

.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;
}

Upvotes: 2

user235273
user235273

Reputation:

Overrides the icon disc color to white. 

.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;
}

Icon size is specified in ui-icon class which defaults to 18px. 

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

Upvotes: 0

Related Questions