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

He este botón which i have added a custom icon to.

I would like to remove the lighter gray which is within the icon. enter image description here

This lighter gray is not part of the icon, it's got to be somewhere within jquery's CSS which i should be able to overide. enter image description here

What can I do to my CSS to accomplish this?

You can view source on the link i've provided but here is the current CSS:

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

preguntado el 09 de marzo de 12 a las 16:03

6 Respuestas

your problem is:

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

solo agrega

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

respondido 09 mar '12, 16:03

You can overide with your css (put it after jquery mobile css load, or add important at the end).

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

respondido 09 mar '12, 16:03

This removed my icon. hannes and thepriebe got it. (+1) for the effort. - Capdragón

It depends of where you do it. It works only if you change directly the css. - alytrem

For the style of this guy

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

Añadir:

background-color: transparent;

respondido 09 mar '12, 16:03

(+1) for the effort but Hannes answered first. - Capdragón

Set the background color of the span to transparent.

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

enter image description here

respondido 09 mar '12, 16:03

Go to jquery.mobile-1.0.1.min.css and go to line and find .ui-icon, .ui-icon-searchfield:after

Then on background change to

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)

respondido 09 mar '12, 16:03

Something like this work:

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>​

CO

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

respondido 09 mar '12, 16:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.