HTML5 Search Inputs - Tips and Tricks

HTML5 has some great new tags and attributes allowing you to do some neat stuff without having to resort to HTML/JavaScript/CSS hacks. Today I learnt a little about the HTML5 'search' tag, which is actually a normal input with the type set to 'search' (rather than text/hidden/submit etc). It is basically meant as a quick way to create a search input for your site and webkit-based browsers have added a little support for the new type, which you can see if you have Chrome 5 or the latest Safari. Chris Coyier has also created a lovely little article detailing what can and can't be done with the search attribute, and it's (quite major) limitations. You can read more of that:

Chris Coyier on HTML5 Search

Personally, I can see a use for this, but I'm not completely convinced by the style rules that can't be overwritten. I'm all for maintaining a semantic web, but not if it stops me from making an element look just the way I want it to. Inputs in CSS always used to be a headache because of native browser styles that meant overwriting them could be a pain, especially for the old and decrepid Internet Explorer 6. This feels a little like that scenario come back to haunt us.

However, judging by the HTMl5 Spec on the search type not a lot needs to be done with it and it more represents a placeholder for a more semantic based site/web search. I do, however, quite like the idea of a native quick-search functionality that shows the latest x number of search items.

I guess we'll have to wait and see what happens...