定制jQuery移动按钮的CSS样式

Question

我有一个按钮，在这里看到，我已经添加了一个自定义图标。

我想要去掉图标中的浅灰色部分。 这个浅灰色并不是图标的一部分，它肯定存在于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;
}

- capdragon

Answer 1

你的问题是：

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

仅需添加

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

- Hannes

Answer 2

您可以使用您的CSS进行覆盖（将其放在jquery mobile css加载之后，或在末尾添加important）。

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

- Alytrem

---

这删除了我的图标。hannes和thepriebe搞定了。(+1)为他们的努力加分。 - capdragon

这取决于你在哪里进行操作。只有在直接更改CSS时才有效。 - Alytrem

Answer 3

针对这个人的风格

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

地址：

background-color: transparent;

- PREEB

---

(+1) 鼓励你的努力，但是Hannes先回答了。 - capdragon

Answer 4

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

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

- ShankarSangoli

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)

- user1211577

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

- Phill Pafford