One of the new types of inputs in HTML5 is search
<input type=search name=s>
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 an 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.
<input type=search results=5 name=s>
The integer value you give the results attribute is how many recent searches will appear in this dropdown, if there are that many.
I really like the little magnifying glass. It drive home the searchyness of the field, but I’m calling the functionality itself rather janky. On a page reload recent searches clears, so that dropdown will almost always say “No recent searches”, unless you have implemented some kind of Ajax search (and even that I haven’t really tested).
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 <= 10px
Medium 11px – 15px
Large >= 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.
Identical font sizings not idential.
Notice the (x) on the right hand side of the search inputs on the WebKit side. That is an additional feature of these search inputs in WebKit. If the input has any value (not a placeholder, a real value) the (x) will be present which is a functional UI control for clearing the input.
Speaking of placeholder text, search inputs are a great candiate for that.
<input type=search results=5 placeholder=Search... name=s>
And in case light gray isn’t your cup of tea, you can style the placeholder text:
::-webkit-input-placeholder {
color: orangered;
}
Source : http://css-tricks.com/webkit-html5-search-inputs/
<input type=search name=s>
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 an 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.
<input type=search results=5 name=s>
The integer value you give the results attribute is how many recent searches will appear in this dropdown, if there are that many.
I really like the little magnifying glass. It drive home the searchyness of the field, but I’m calling the functionality itself rather janky. On a page reload recent searches clears, so that dropdown will almost always say “No recent searches”, unless you have implemented some kind of Ajax search (and even that I haven’t really tested).
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 <= 10px
Medium 11px – 15px
Large >= 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.
Identical font sizings not idential.
Notice the (x) on the right hand side of the search inputs on the WebKit side. That is an additional feature of these search inputs in WebKit. If the input has any value (not a placeholder, a real value) the (x) will be present which is a functional UI control for clearing the input.
Speaking of placeholder text, search inputs are a great candiate for that.
<input type=search results=5 placeholder=Search... name=s>
And in case light gray isn’t your cup of tea, you can style the placeholder text:
::-webkit-input-placeholder {
color: orangered;
}
Source : http://css-tricks.com/webkit-html5-search-inputs/
