Posts

Showing posts from May, 2013

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!

Jquery Mobile Form - Search input

Input field of type search is newly introduced in HTML5 and is very well styled. The style is further enhanced when using the Jquery Mobile framework and we will see how this can be done in today's post. Jquery Mobile styles the search input type with capsule-corners and adds a 'x' icon to the right end, which clears the text in the search box.

The seacrch input elements are available in 2 flavors/sizes - regular and mini.Adding a data attribute data-mini="true" to the input tag renders a smaller sized input element. Let's take a look at the code sample below to understand the working in a better way.



In the code above, you will see 4 different implementations of the input search element. The first one is a regular input of type search with the label and the searchbox one below the other. The second implementation is exactly similar to the first implementation with the only difference of the added data attribute "data-mini="true"" which…