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

The Bicycling Layer...

Recreational cyclists and bike commuters alike can plot cycle-friendly routes, find trails, and avoid snarling traffic with Google Map's Bicycle layer. Map's bike-friendly, green-toned map layer is very eye-pleasing. The Google Maps API allows you to add bicycle information to your maps using the BicyclingLayer object. The BicyclingLayer renders a layer of bike paths, suggested bike routes and other overlays specific to bicycling usage on top of the given map. Additionally, the layer alters the style of the base map itself to emphasize streets supporting bicycle routes and de-emphasize streets inappropriate for bicycles. Let us have a look at the following example. The code has a map which is centered at Pune, India. There are very few cycle tracks in Pune and so you will see just a few dark green lines on the map. But if you would change the latitude-longitude values in the code and center the map at USA, then you will see a...

Form info window

Today we will look at a Google Maps API v3 example to add a form in the information bubble! This is usually required when we wish to accept some data/information from the user! This data can be saved to a server in the form of an XML file or a database! The information can then be retrieved back at a later stage, when necessary! In this example we will only look at form in the information bubble! The connectivity part with the server will be discussed in another post! So, today's code snippet is as seen below! <html> <head> <title> Google Maps API v3 - Adding marker and info window on Click and creating a form in the infowindow with the lat-lng information in it. </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map; //When using ev...

Google Map's Real-Time Traffic Layer...

You can now check the traffic condition on the road before you leave for work, or a party or to your friend's place. Google's Traffic layer shows the traffic conditions in your area - LIVE!!! Live traffic data is available in major cities in the United States, France, Britain, Canada and Australia, with new cities and countries frequently added. The Google Maps API allows you to add real-time traffic information (where supported) to your maps using the TrafficLayer object. Traffic information is provided for the time at which the request is made. Consult this spreadsheet to determine traffic coverage support. Let us now have a look at the Google Maps API - Trafiic Layer example. Copy the following code in a simple text file and save it as html. Click on this html file and it will open in your default browser. You will then see the traffic conditions in your area - LIVE... The output of the above code looks as seen in the r...

Google's latest April Fool's Prank

Google has done it again! Just in time for the April Fool's Day, Google introduced Google Maps Quest, a retro 8-bit version of its mapping tool... which is completely awesome! In the video available below, Google employees introduce the new version for the Nintendo Entertainment System (NES), replete with finicky cartridge and the vintage 8-bit music. With this new Google Maps Quest, one can do all the things that can already be done on the regular Google Map. You can search for famous landmarks and sites around the world like the Taj Mahal, Agra, India. You can also get detailed directions to avoid dangerous paths, and battle your way through a world of powerful monsters and mystic treasures. You can see the sequence of following images at lat-long 0,0 at incremental zoom levels starting from zoom level 9. To use this awesome 8-bi...

Where does Google get it's live traffic data from?

Referring to a post that I wrote earlier, Google’s - Live traffic Layer , ever wondered how Google collected this data? I was wondering the other day, how Google received live data to display it on their maps as a layer! I looked up the web and found something very interesting and am sharing the same with you all. As we all know, the traffic layer is available most accurately in several states in USA. Most major metro areas in the US have sensors embedded in their highways. These sensors track real time traffic data. Easy to miss at high speeds (hopefully anyway, traffic permitting), more commonly noticed may be the similar sensors that often exist at many busy intersections that help the traffic lights most efficiently let the most amount of people through. The information from these tracking sensors is reported back to the Department of Transportation (DOT). The DOT uses this data to update some of the digital signs that report traffic conditions in many metro areas. They als...

The UI Dev

Search This Blog