Jquery mobile how to remove gray round circle on icon

Question

I am creating my first jquery junction Appl Im changing my icon using this class

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

This custom icon is for viewing the list, and I'm trying to remove the round gray background image. Also my picture is a little big for the form. I played with the .ui icon, but it didn’t work. Can't find the class

I just want my own drawing with an arrow completely on a white background not a round circle circle Perhaps there is an attribute or via css to do this thanks

Answer 1

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

Answer 2

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

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

to the name of your custom class, therefore:

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

- that’s 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 with CSS.

from jQuery Website :

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

Answer 4

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

Answer 5

Overrides the color of the icon icon 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; } 

The icon size is specified in the ui-icon class, which is 18px by default.

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

Answer 6

For those of you who only have a button icon, I found this article very useful! I used the Reset button theme "and" Icon-only buttons "sections to get the desired effect.

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

Answer 7

I solved this problem using:

 background-color:transparent; 

if you want to add a background color that you can use:

 background: url(yourimage.png) repeat;