In this new article, you’ll learn how create a cool and usable CSS3 search box using the HTML5 placeholder attribute. For the browsers that don’t support this new HTML5 attribute, a fallback is created using Modernizr’s feature detection.
The form element is used as the wrapper, while the two inputs are used as search field and search button respectively.
The HTML code
You may notice the placeholder attribute, but just ignore it for now, as we will talk later about it.
The reason why there are so many id’s (instead of CSS3 advanced selectors as input[type="text"] or input[type="submit"]) is because I wanted this to degrade gracefully for older browsers.
Form wrapper styles
Below you can see the current result:
When adding float: left to an element, there’s no need to add also display: block. The last one it’s implied.
HTML5 placeholder attribute
Opera 11 supports it, but you cannot style it (yet). As for the others above, here’s how you can style it:
For web browsers that are not supporting the this new HTML5 attribute, I made a fallback.
I used Modernizr to detect native support for the HTML5 placeholder attribute. Even if this could have been done by writing a short function, I love Modernizr as it also enables you to use more semantic elements from the HTML5 specs.
This example it’s mostly about progressive enhancement.