пользовательский стиль CSS для кнопки мобильного jquery

Question

У меня есть эта кнопка , к которой я добавил пользовательский значок.

Я хотел бы убрать светло-серый, который находится внутри значка.

Этот светло-серый не является частью иконки, он должен быть где-то внутри CSS jquery, который я должен быть в состоянии переопределить.

Что я могу сделать с моим CSS для этого?

Вы можете просмотреть исходный код по предоставленной мной ссылке, но вот текущий 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

Ваша проблема:

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

просто добавьте

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

Answer 2

Вы можете переопределить свой css (поставить его после загрузки jquery mobile css, или добавить в конце важный).

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

Answer 3

Перейдите в jquery.mobile-1.0.1.min.css и перейдите к строке и найдите .ui-icon, .ui-icon-searchfield:after

Затем измените фон на

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

вместо

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

Answer 4

Установить цвет фона для прозрачного.

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

Answer 5

Для стиля этого парня

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

Добавить:

background-color: transparent;

Answer 6

Примерно такая работа:

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