0

我想用 android 特定图标替换框架列表视图搜索字段（设置时：data-filter="true"）中 jquery mobile 的标准图标。我找到了负责任的选择器并用我自己的方式覆盖了 jQM 的路径。在我的桌面浏览器（FF、Safari）上一切看起来都很好，但是一旦我启动模拟器，搜索字段中就再也没有图标了。

这是我的课程，正如我在桌面浏览器上所说的那样，但在模拟器或设备上却不行：

/* search icon (magnifier) at the beginning of search field */
.ui-icon-searchfield:after{
    background: url(../img/mdpi/2-action-search-dark.png) -5px -5px;
    height: 30px;
    width:30px;
    top: .8em;
    left: 0;

    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -webkit-border-radius: 0;
}

/* delete icon (X) at the end of search field */
.ui-icon-delete{
    background: url(../img/mdpi/1-navigation-cancel-dark.png) -7px -7px;
    height: 18px;
    width:18px;
    border-radius: 0;
    opacity: .7;

    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -webkit-border-radius: 0;
}
4

1 回答 1

0

经过几个小时的尝试，我自己解决了我的问题。问题是图像一直在背景中，但完全不正确！

有一个名为 background-size 的新 CSS3 功能。这导致我的背景图像太大而且比例不正确。所以我将它设置为我的实际图像的大小（背景大小：32px 32px;），瞧，它显示在每个浏览器中！

/* search icon */
.ui-icon-searchfield:after{
    background-image: url(../img/mdpi/2-action-search-dark.png) 0 0;
    background-size: 32px 32px;
    height: 32px;
    width:32px;      
    margin-top: .15em;
    top: 0;
    left: 0;

    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -webkit-border-radius: 0;
}

/* delete icon */
.ui-icon-delete{
    background-image: url(../img/mdpi/1-navigation-cancel-dark.png);
    background-position: -7px -7px;
    background-size: 32px 32px;
    background-color: transparent;
    height: 32px;
    width:32px;
    border-radius: 0;
    opacity: .7;

    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -webkit-border-radius: 0;
}
于 2012-06-14T08:33:14.767 回答