jQuery Mobile, wie das graue runden Kreis auf das Symbol entfernen

Question

Ich baue meine erste phonegap JQuery Appl Im Wechsel mein Symbol mit dieser Klasse

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

Diese benutzerdefinierten Symbol für eine Listenansicht ist, und ich versuche, das entfernen ich will nur meine benutzerdefinierte Pfeil Bild in voller Größe auf einem weißen Hintergrund runden grauen Hintergrund Last auch ist mein Bild ein wenig zu groß für die Form ich mit dem .ui-Symbol spielen wurde aber nicht funktioniert Cant der Klasse

finden liste keine runde kein kreis box formaufVielleicht gibt es ein Attribut oder über CSS, um das Dank

Answer 1

Dies sollte funktionieren.

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

Überschreibt die Symbol-Disc-Farbe in Weiß.

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

Symbolgröße wird in ui-icon Klasse, die standardmäßig auf 18px angegeben.

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

Answer 3

spät zur Party hier, aber eine einfache Antwort ist

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

zu Ihrer benutzerdefinierten Klassennamen hinzufügen, so:

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

alles, was Sie brauchen.

Answer 4

Mit JQuery Mobile 1.3, jetzt alles, was Sie tun müssen, ist fügen Sie die Klasse "Ui-Nodisc-Symbol", keine Notwendigkeit, herum mit der CSS.

von JQuery Website:

„Wenn Sie den dunklen Kreis hinter den Symbolen nicht benötigen, einfach das ui-NoDisc-Symbol auf das Element oder seinen Behälter hinzufügen das Symbol Hintergrund zu entfernen.“

Answer 5

Für diejenigen unter Ihnen, die nur ein Symbol für den Button haben möchten - ich fand diesen Artikel sehr nützlich! Ich folgte den Abschnitten "Reset the button theme" und "Icon-only buttons", um den gewünschten Effekt zu erzielen.

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

Answer 6

Wenn Sie jQuery v 1.4.0 verwenden + dann brauchen Sie nur die Klasse .ui-nodisc-icon zu Ihrem Link-Elemente hinzufügen, dass lästigen Kreis zu entfernen. Sie müssen kein CSS bearbeiten oder irgendwelche Überschreibungen schreiben.

Answer 7

ich dieses Problem gelöst, indem:

background-color:transparent; 

wenn Sie Farbe im Hintergrund hinzufügen möchten, können Sie verwenden:

background: url(yourimage.png) repeat;