Monday, September 6th, 2010

Searching for the HTML5 Search Input

Category: HTML

I recently saw the new HTML5 Search input element and wondered what the heck it does:

  1. <input name="s" type="search" />

Chris Coyier has posted an in-depth article going into this new HTML5 input type to appease your curiosity. The HTML5 spec actually says you don’t have to do much with it, but Webkit actually has a range of options.

First, it visually distinguishes the input field with an inset border, rounded corners, and typographic controls:

Chris has discovered that you actually can’t override the following visual properties on a search input with CSS:

  1. input[type=search] {
  2.   padding: 30px;            /* Overridden by padding: 1px; */
  3.   font-family: Georgia;     /* Overridden by font: -webkit-small-control; */
  4.   border: 5px solid black;  /* Overridden by border: 2px inset; */
  5.   background: red;          /* Overridden by background-color: white; */
  6.   line-height: 3;           /* Irrelevant, I guess */
  7. }

However, the following can be styled in an HTML5 search input:

  1. input[type=search] {
  2.   color: red;
  3.   text-align: right;
  4.   cursor: pointer;
  5.   display: block;
  6.   width: 100%;
  7.   letter-spacing: 4px;
  8.   text-shadow: 0 0 2px black;
  9.   word-spacing: 20px;
  10. }

Chris (via Mike Taylor) also discovered a ‘results’ parameter that can be used on Webkit but is not in the HTML5 spec:

  1. <input name="s" type="search" results="5" />

which gives a drop down with the number of results requested:

Posted by Brad Neuberg at 5:30 am

2.8 rating from 5 votes


Comments feed TrackBack URI

There are also some custom events too – such as ‘search’ which fires when the user pauses typing (set ‘incremental’ to true).

Comment by maccman — September 6, 2010

Don’t have my computer here with me, but I think you can override the visuals by first declaring input[ type=search] {-webkit-appearance:none}

Comment by Jordan1 — September 6, 2010

-webkit-appearance:none does indeed work.

I’m a little confused as to why they would make styles that can’t be overridden though? Is “-webkit-appearance:none” something we are going to have to add to our resets from now on?

Also, Chrome (current version & Canary) and Safari render some of these styles differently if you don’t turn appearance off.

What am I missing?

Comment by randyjensen — September 6, 2010

It’ll be great when we can start plugging this stuff in and know it’ll work on at least a few of the most popular browsers.

Some day…

Comment by samTCB — September 6, 2010

Too bad Firefox doesn’t let you override !important with -moz-appearance :(
I would looove that for setting line-height on inputs and buttons.

Comment by rasmusfl0e — September 6, 2010

Yes, -webkit-appearance:none let’s you override the look-and-feel of iTunes, which was what it was trying to emulate at the time.

Comment by sroussey — September 6, 2010

Hmmm, I thought these new input types were defined in more detail. I wouldn’t wanna end up with bloated CSS and JS because all browsers handle search/date/etc. types with different styles and events. :(
(As far as I can tell the only thing Chrome on windows does with search field is add an “x” to clear it when something’s typed in, though there may be events as well)

Comment by iliad — September 6, 2010

And you know what, styling shouldn’t be forced by browsers, that’s what CSS is for. Haven’t we had this song and dance with the stupid OS specific element widgets (i.e. button, checkbox, radio button, dropdown list, etc.)? I mean I get that they want it to have the “OS X look” but I think it should be optional – i.e. instead of having to turn it off via some obscure CSS property, it should be turned on.

Comment by iliad — September 6, 2010

@sroussey — September 6, 2010

You shouldn’t have to style the date control, it’s supposed to be integrated like the file browser. It opens you OS calendar where you know how the navigation works and where you can easily see all your other meetings.

Or, actually im not sure but otherwhise i don’t see any benefit of using a specific input type for that.

Comment by randomrandom — September 7, 2010

Leave a comment

You must be logged in to post a comment.