estilo css personalizado para el botón móvil jquery

Question

Tengo this button al que he agregado un ícono personalizado.

Me gustaría eliminar el gris más claro que está dentro del ícono.

Este gris más claro no es parte del ícono, tiene que estar en algún lugar dentro del CSS de jquery que yo pueda superar.

¿Qué puedo hacer con mi CSS para lograr esto?

Puede ver la fuente en el enlace que he proporcionado, pero aquí es el CSS actual:

.ui-icon-my-map { 
    background-image: url("images/103-map.png"); 
    background-position: 4px 50%; 
    background-size: 26px 21px; 
    height: 24px; 
    margin-top: -12px !important; 
    width: 35px; 
} 

Answer 1

su problema es:

.ui-icon, .ui-icon-searchfield::after { 
    background: #666; 
    background: rgba(0, 0, 0, .4); 
} 

sólo tiene que añadir

.ui-icon-my-map { 
[...] 
    background-color: transparent; 
} 

Answer 2

Puede overide con su css (ponerlo tras carga css jquery móvil, o añadir importante al final)

.ui-icon, .ui-icon-searchfield::after { 
background: none; 
} 

Answer 3

Para el estilo de este tipo

<span class="ui-icon ui-icon-my-map ui-icon-shadow"></span> 

Añadir:

background-color: transparent; 

Answer 4

Establezca el color de fondo del tramo en transparente.

.ui-icon-my-map{ 
    background-color: transparent; 
} 

Answer 5

Ir a jquery.mobile-1.0.1.min.css e ir a la línea y encontrar .ui-icon, .ui-icon-searchfield:after

Luego, el cambio de fondo para

url("images/icons-18-white.png") no-repeat scroll 0 0 transparent; 

en lugar de

url("images/icons-18-white.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0.4) 

Answer 6

Algo así como este trabajo:

• http://jsfiddle.net/tR9Cj/

HTML

<div data-role="page" id="home"> 
    <a id="bnt_edge" data-role="button" data-inline="false" data-transition="turn" href="#" rel="external" data-icon="my-map" data-theme="c" data-iconshadow="false">My Button</a> 
</div>​ 

CSS

.ui-icon-my-map { 
    background-image: url("http://i.stack.imgur.com/zjB5L.png"); 
    background-position: 4px 50%; 
    background-size: 26px 21px; 
    height: 24px; 
    margin-top: -12px !important; 
    width: 35px; 
    background-color: transparent; 
}​