javascript - jQuery Mobile 设置按钮的图标

Question

我正在尝试向按钮添加图标，这些按钮是我使用 jQuery 动态创建的。我为按钮创建了 css 类。在运行时，我在按钮的一侧看到一个灰色的圆圈，而不是图像。在检查元素时，我发现按钮的图像已被覆盖。

如何确保显示按钮图标而不是灰色圆圈？我使用的代码是:

JS:

var btn1 = $("<button/>", {'id': 'TestButton'}).html('Sample Button');
btn1.buttonMarkup({ theme: 'c', icon: 'btn1' });

CSS:

.ui-icon-btn1 {
    background-image: url('../../images/gallery.jpg');
    background-color: rgb(255,255,255);
    border-style: hidden;
    -webkit-box-shadow: none;
    box-shadow: none;
}

Answer 1

一个简单的解决方案是将 !important 放入该属性。

background: url('../../images/gallery.jpg') !important;
background-color: rgb(255,255,255) !important;

这对我在 jQuery-mobile 的类似问题上有用。

编辑:

要去掉按钮周围的圆盘，需要添加

`border: 0 !important;` 

上课

.ui-li-link-alt .ui-btn 但请确保您没有覆盖 jQuery UI 的默认行为。