自定义css样式为jquery移动按钮

Question

我已经添加了自定义图标this button。

我想删除图标内的浅灰色。

这个浅灰色不是图标的一部分，它必须在jquery的CSS中，我应该能够覆盖。

我可以对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 load之后，或者在最后加上重要的东西）。

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

Answer 3

对于这个家伙的风格

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

添加：

background-color: transparent;

Answer 4

将范围的背景颜色设置为透明。

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

Answer 5

转到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 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;
}​