0

フレームワーク リスト ビューの検索フィールド (設定時: data-filter="true") の jquery mobile の標準アイコンを Android 固有のアイコンに置き換えたいと考えました。責任あるセレクターを見つけて、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 機能があります。これにより、背景画像が大きくなりすぎて、適切な比率ではなくなりました。そこで、実際の画像のサイズ (background-size: 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 に答える