Can't overwrite standard icons of jquery mobile search/filter field in android browser and emulator

I wanted to replace jquery mobile's standard icons in the frameworks list view search field (when set: data-filter="true") with android specific icons. I found the responsible selector and overwrote jQM's path with my own. Everything looks fine on my desktop browsers (FF, Safari), but as soon as I start the emulator, there are no icons at all in the search field anymore.

Here is my class that works as I said on desktop browsers but not in the simulator or on device:

/* 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;
}

Answers


I solved my issue myself after some hours of trying so many things. The problem was that the image was there in the background the whole time, but totally misscaled!

There is a new CSS3 feature called background-size. This caused my background-image to be to big and not in the right proportion. So I set it to the size of my actual image (background-size: 32px 32px;) and voila, it's displayed in every browser!

/* 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;
}

Need Your Help

How to Append RTF Text in RichTextBox, Win C#

c# append richtextbox

I have a RichTextBox in Win C#, and I want to append some new text with Bold effect in RichTextBox. So how can i do this.

Google Spreadsheets: email notifications for single cell

google-sheets email-notifications

I am looking to set up something where notifications are only sent out if a specific single cell is changed. I have little coding experience and have a general idea of what needs to be in place. ...