jquery mobile how remove the grey round circle on icon

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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."