Customize ajax loading image in jQuery mobile

In jQuery mobile v 1.0, to change defalt styling of ajax loading and search bar icon customize following default css.

Customize ajax loading image using css
.ui-loader .ui-icon {
background-color: transparent;
}

.ui-loader-default {
opacity: 1;
}

.ui-icon-loading {
background: url(YOUR URL) no-repeat;
}

Customize search bar icon using css
.ui-icon-search, .ui-icon-searchfield:after {
background-position: 0px 100%;
}

.ui-icon, .ui-icon-searchfield:after {
background: url(YOUR URL) no-repeat;
border-radius: 9px 9px 9px 9px;
background-size: 16px 16px;
}

.ui-icon-searchfield:after
{
opacity:1;
}

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s