Question

我必须在jquery mobile的按钮中使用自定义图标。我有一个带有我的图标，它出现在按钮中。但我面临的问题是，默认圆圈出现在我的图标周围。我需要删除此边框圈，只显示图标。如何解决此问题？

这是我的html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
           </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <div data-role="content" data-theme="b">
                <input type="button" data-inline="true" data-theme="b" data-icon="save-icon" data-iconpos="left" value="Save Data"></a>
            </div>
            <div data-role="footer" data-position="fixed" data-id="pFooter">
               <h1>Test</h1>
            </div>    
        </div>
   </body>
</html>

和以下CSS：

.ui-icon-save-icon{
    background:  url(save_icon.png) 50% 50% no-repeat; background-size: 19px 21px;
}

你可以在这里看到它 - http://jsfiddle.net/yPRpt/

请注意，图标丢失，但您可以在示例中看到圆圈。

Answer 1

到目前为止我找到的唯一方法是将元素上的'data-icon'属性设置为'custom'，然后使用透明背景图像在CSS中设置样式

即在标记中：

<a id="hlFind" data-role="button" data-icon="custom">Find</a>

在css中：

#hlFind .ui-icon-custom {
    background:url("images/icon_phone_green.png") no-repeat scroll 0 0 transparent;
}

Answer 2

您将能够删除jQuery Mobile主题添加到按钮的半透明圆圈的唯一方法是识别并覆盖相关的CSS和/或Javascript负责。

或者，为什么不修改自定义图标以使用jQM做什么？

Answer 3

我认为你不能删除这个圈子。

文档：

jQuery Mobile框架...自动添加一个半透明的黑色圆圈

http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/buttons/buttons-icons.html

您可以创建一个非透明图标，背景与圆圈一样大，颜色与按钮相同，但我不确定这是否有效。（另）

Answer 4

覆盖jquery mobile css文件中的以下代码

.ui-icon-searchfield:after {
    background:                         #666 /*{global-icon-color}*/;
    background:                         rgba(0,0,0,.4) /*{global-icon-disc}*/;
    background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
    background-repeat: no-repeat;
    -moz-border-radius:                 9px;
    -webkit-border-radius:              9px;
    border-radius:                      9px;
}

此部分导致默认的黑色透明图像和圆角截止

Answer 5

这篇文章在谷歌上被很好地引用。如果有人还在寻找一个简单的解决方案，我只找到一个：

<p data-role="button"><img align="left" width="35px" src="something.jpg"/>Button name<p>

希望这会有所帮助

Answer 6

覆盖此css

.ui-btn-corner-all {

}

Answer 7

这些解决方案都不适合我...

只需输入你的css代码

.ui-icon-save-icon{
    background:  url(save_icon.png) 50% 50% no-repeat; background-size: 19px 21px;
}

并在css事件后添加：将默认圆圈大小设置为0，默认圆圈将消失！：）

.ui-icon-save-icon:after {
    width: 0px;
    height: 0px;
}

在jquery mobile中使用按钮中的自定义矩形图标

7 个答案: