Rethink input with type search

In Mark Pilgrim’s magnum opus – Dive Into HTML5, there is this section under Web Forms that talks about the styling of <input type="search">.

I mis-understood the idea several times before knowing what it is really all about, and after knowing, I decided to share my final opinions here:

There are two parts of the story, one is the fact stated on the book, and another is the practice used based on the fact.

First, let’s talk about the fact
In Dive Into HTML5, it was mentioned “By default, Safari will not apply even the most basic CSS styles to <input type=”search”> fields.

Well, this is not entirely true. Depends on the definition of CSS styles, I consider the change of width and height as basic styling as well, so in this case, Safari can, by default, apply CSS style rules. Refer to the input box with id='serach-a' below:

However, what doesn’t work is when you try to alter the design appearance of the input, let’s say if you apply 'border:1px solid red;', by default, Safari will not render it. Refer to the input box with id='serach-b' below:

In the case above, if you want to force Safari to style the border, you have to use the hack mentioned by John Lein in Mark’s Dive into HTML5. Refer to the input box with id='serach-c' below:

One more thing to note at this point is that this is not just a Safari issue, Chrome also has the same behavior.

Second, let’s talk about the practice
Do websites need to look exactly the same in every browser? The answer is here. Form element can show up based on the UA design. There isn’t a need to make a button or search box to look exactly the same in every browser.

Conclusion
This is not to say what Mark Pilgrim mentioned in his book was wrong, he didn’t encourage people to change the style of a form, he simply pointed out how to do so if you want to force the styling (we all know how hard to convince the bureaucrats in an agency). The only part that needs a bit clarification is the line “By default, Safari will not apply even the most basic CSS styles to <input type=”search”> fields.” Again, this is based on my interpretation.

Thanks
Thanks to Mark Pilgrim to write such a nice book for FREE.
Thanks to the tip by John Lein.
Thanks to MarcHaunschild to brought this issue up.
Thanks hoopyfrood for the reply to make me rethink.
Thanks to Paul Irish’s comment to make me rethink again about this.
And thanks to Mathias Bynens’ reminder link.

Be Sociable, Share!

About Shi Chuan

I am a web developer.
This entry was posted in HTML. Bookmark the permalink.

2 Responses to Rethink input with type search

  1. Chris Coyier says:

    If you leave the -webkit-appearance alone, there is a number of things the inputs will take and a number of things it won’t. I posted a little research on that here: http://css-tricks.com/webkit-html5-search-inputs/ You can also just set the -webkit-appearance to none and start from scratch. I know Opera 11 is now rounding the corners of search inputs, but I’m not sure how hard that is to fight (I bet it’s easier).

  2. b wing says:

    Thanks for the writeup.
    I’m actually curious about what app you were using when you grabbed those screenshots?
    That looks like a very useful interface for web development.

    thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>