custom css styling for jquery mobile button

Question

I have this button which i have added a custom icon to.

I would like to remove the lighter gray which is within the icon.

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.

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

Answer 1

your problem is:

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

just add

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

Answer 2

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

Answer 3

For the style of this guy

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

Add:

background-color: transparent;

Answer 4

Set the background color of the span to transparent.

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