WebKit 实现HTML5 搜索输入框

One of the new types of inputs in HTML5 is search.


It does absolutely nothing in most browsers. It just behaves like a text input. This isn't a problem. The spec doesn't require it to do anything special. WebKit browsers do treat it a bit differently though, primarily with styling.






A search input in WebKit by default has an inset border, rounded corners, and strict typographic control.


The Styling Limitations

WebKit has big time restrictions on what you can change on a search input. I would guess the idea is consistency. In Safari particularly, search fields look just like the search box in the upper right of the browser. The following CSS will be ignored in WebKit "no matter what", as in, you can't even fight against it with !important rules.

input[type=search] {
        padding: 30px;            /* Overridden by padding: 1px; */
        font-family: Georgia;     /* Overridden by font: -webkit-small-control; */
        border: 5px solid black;  /* Overridden by border: 2px inset; */
        background: red;          /* Overridden by background-color: white; */
        line-height: 3;           /* Irrelevant, I guess */
}
In other words, be extremely cautious about using any of those CSS properties on a search input unless you are OK with the search input looking very different in other browsers.

Allowed styling

The following CSS works as expected. The last three, in my opinion, should probably locked in like the properties above as styling those properties almost always looks worse than if you didn't.

input[type=search] {
        color: red;
        text-align: right;
        cursor: pointer;
        display: block;
        width: 100%;
        letter-spacing: 4px;
        text-shadow: 0 0 2px black;
        word-spacing: 20px;
}
Busted styling

Be careful not to use text-indent on search inputs. The results are quite weird and inconsistent. Here is one example:






Sometimes the text is below like this. Sometimes it's not visible at all. It appears to be related to elements around it as well as how much indent it has (low values sometimes work fine).

Show Previous Searches

This isn't documented anywhere that I know of nor is it in the spec, but you if you add a results parameter on the input, WebKit will apply a little magnifying glass with a dropdown arrow showing previous results. (Thanks to Mike Taylor)







The integer value you give the results attribute is how many recent searches will appear in this dropdown, if there are that many.
Size Restrictions

There are only three different "sizes" that WebKit search inputs can be, and it is determined by the font-size you declare on them.

Resulting Size CSS font-size
Small = 16px





Small, Medium, and Large. That's all you get!

This small, medium, and large business can be extremely frustrating, as even setting identical font values, at the minimum for a "bump", you'll see font size difference across browsers.