Jquery Mobile - Customizing the search box

Customizing the Jquery Mobile default styles is often required to match the design visuals provided by your designer and approved by your client. Such is the case with the Jquery Mobile search box as well. The designers often use customized icons for the default search box icons. In the example that follows, we will take a look at how this done and we will use custom icons for the search box in place of the default icons.

As seen in the example above, in the CSS, we need to use the !important keyword to override the default styles of the Jquery Mobile class.

Customizing the search box or any other element in Jquery mobile is pretty simple. Hope you have followed the post and followed how to customize the Jquery Mobile default styles for the HTML5 search input box. Drop a comment in case you need to know more or need help with your Jquery Mobile application. I would be happy to help!

Comments

Recommended for You

Playing with the markers and info window bubbles...

In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase! So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life! The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .

jQuery Mobile's Next Big Step

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍

ES6 101 - Class

ES6 101 - For..of

Merry Christmas

Hello everyone! Its been a long time since I last wrote. Got real busy with some exciting projects and exciting opportunities. It has been a crazy and really exciting and knowledgeable journey this year. Hope you all had a great year and are looking forward to the holiday season! I wanted to take this opportunity to wish you all a very happy Christmas! As you all relish the goodies, decorate every nook and corner of your home and enjoy the get-togethers... May the joy and festivities continue to radiate in your lives, long after Christmas is gone! Stay safe, enjoy the holidays and get refreshed to join me on an enriching journey in the new year! I'll make sure that I write consistently and write about new things I learn. Signing off for the holiday season!

The UI Dev

Search This Blog