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

KML Layer Example

Until now, we have covered various examples involving markers, polylines, polygons, i.e. creating overlays. We have also seen other examples to remove overlays! We will now move on to some other concepts. Today we will have a look at what KML is and how to create a KML layer! Let us first understand what KML is and why is it necessary. KML stands for Keyhole Markup Language which is an XML schema for expressing geographic annotation and visualisation within 2D maps and 3D Earth browsers. The KML file specifies a set of features (place marks, images, polygons, 3D models, textual descriptions, etc.) for display in Google Earth, Maps and Mobile, or any other 3D Earth browser (geobrowser) implementing the KML encoding. Each place always has a latitude and a longitude. Other data can make the view more specific, such as tilt, heading, altitude, which together define a "camera view". ...

CSS Text and Font

In this post today, we will take a look at some of the most interesting CSS text and font properties listed below. text-transform white-space word-break word-spacing word-wrap font-variant Text-transform property: Let's begin with the text-transform property. The filler text used in all the examples below has been taken from Andy Matthew's filler text generator which is a humorous replacement to the traditional boring lorem ipsum . The text-transform property will turn your text to uppercase, lowercase and also will capitalize the first character of every word. So now you don't need any javascript to do your bidding. This transformation will be done irrespective of the special characters preceding and following the text characters. The following example will make things much more clear and editable of course =) White-space property: The next property to explore is the white-space proper...

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 - Nested Listview

The Jquery Mobile listview is nothing but a ul-li HTML structure styled to appear as a list on a web browser. The plain ul-li structure can be modified to create the nested listview structure. Take a look at the example below, to understand the nested listview structure of Jquery Mobile. By nesting child ul or ol inside list items, you can create nested lists. When a list item with a child list is clicked, the Jquery Mobile framework will show a new page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation. Lists can be nested multiple levels deep and all pages and linking will be automatically handled by the framework. Note that the page of each nested listview is created when the parent page loads and for each nested page the ...

ES6 101 - Spread operator

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 😍 😍

The UI Dev

Search This Blog