I’m currently working on the UI design for system to be used by a big New Zealand Government Department.

Search icon
<input type="search" />

As the system is only accessible by staff, we’re less concerned about full browser support and responsive design, than we are with making sure we provide a quality product that makes peoples jobs easier and stands the test of time. Because of this, we’re able to include a few HTML5 elements that gracefully degrade in older browsers but will become useful when the department upgrades.

Among the HTML5 goodies is the new search input. This handy element behaves like a text box but when rendered in Webkit you get a few bonus features including the ability to view previous searches and a ‘clear search’ button. For browsers that don’t support it (lt IE 8), the box gracefully degrades and is rendered as a standard text input.


Problems with Webkit Styling

I’d already designed and styled the search boxes as text boxes but it make complete sense to change them over to use type=search. That however, is when my styles started to fall apart and my search boxes started to look like this in Chrome:

Broken webkit search box

 

 


So what went wrong?

I did a bunch of Googling and peering into the styles in the Chrome Dev Tools. The issue, I found, lies with Webkit automatically styling search boxes in a different way to how text boxes are styled.

Rules such as height are ignored by the browser and the box inherits it’s size based on the text within it. According to this post on Css Tricks, padding, font-family, border, background and line-height are also ignored.


How to fix the problem

– Boost the height up? Nope, that’ll bust it in all other browsers.
– Change the height on input[type=search]? Nope, that’ll bust it in Firefox and IE9.
– Use some JS to stick a class on? Eww. Nope.

Thankfully there’s a way around it:
input[type=search]{
-webkit-appearance: textfield;
box-sizing: content-box;
}

1) Set -webkit-appearance to textfield.
This allows you to make changes to: padding, font-family, border and background. In my case, this got rid of that nasty inset border that I didn’t ask for.

2) Set box-sizing to content-box.
This is required if you want to explicity set the height of the search box. The webkit default (box-sizing: border-box) is an odd choice and I’m not sure why they’ve chosen this. Border-box doesn’t take any padding into account when determining the height.

Input search box height fixed in Webkit

 

 


Is this right?

Why Webkit sets box-sizing to border-box and not content-box, I have no idea. This is inconsistent with the behaviour of other browsers and I see that a bug has been logged on bugs.webkit.org.

I’m currently trying to follow up on why this decision was make so will be sure to post here if I find the answer.