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 attrib...

Comments
Post a Comment
Please leave your comments here...