input type=search

html5 input

25 Feb 2010

In this site I use several html5 elements and attributes. One of them is <input type="search" /> which gives me (for instance) a search button on my Iphone. It degrades to an text kinda input so it's backwards compatible.

What it also does is look kinda ugly in safari, with rounded corners and a frigging shadow and so on.

Default rendering in safari 4 os x

Custom rendering

The way to render this is this one line of css:

input[type="search"]{
  -webkit-appearance:textfield;
  /* textfield instead of searchbox */
  border: 1px solid #39c;
  /* and a border of course but that's not relevant :) */
}

But for now that's it, on simple line in your css and apple no longers controls the style of your search field and you can style it (semi) consistent over browsers. A complete list of webkit specific styles can be found on Qooxdoo.org.

As I know, one disadvantage is that the search box does not longer appear as the default one in safari. But in my opinion the search box is not in usage as of now, so people are now more baffled by a strange box than they recognize the search box. In the future, however I think that this trick is no longer needed nor wanted.

← Home