Custom WebKit search box style

Each browser can have its own behavior and performance, but WebKit under the leadership of Apple, the UI to go a little farther, but it brings us a bit of trouble, because in many cases, we want the search box in all browsers consistent performance ...
Students who have used Macs should be aware of this situation:
Just take the front end and look at the search box in the upper right corner, in Windows and under the Mac performance is completely different Ah, Mac (including Safari and Chrome), in addition to width, you set the other style is basically invalid, this slender interface and the search box on the iOS is the same, Maybe Apple thinks the search box is supposed to be like this?
So in many cases we need to make the page in all platforms, all browsers are basically consistent performance, which is a bit sad, but it is not no way.
Method One: Do not type=search
This is the simplest it approach, use the default Type=text bar, so you can define a common text box like the definition of the search box, the disadvantage is that the search user experience is not the same, but also affect other browsers.
Method Two:-webkit-appearance
But the method one is not acceptable to the semantic control, then we can also use the CSS3 appearance to solve, this is a very useful thing.
For the search box that sets Type=search, the appearance setting for WebKit is:
-webkit-appearance:searchfield;
We set it to:
-webkit-appearance:textfield;
Can.
Looks like it's the perfect way to do it.
Method Three: various pseudo elements
One of the great advantages of WebKit is that it provides a rich artifact to define some of the UI, and for the search box, there are some available:
Input[type=search]::-webkit-search-decoration,
Input[type=search]::-webkit-search-cancel-button,
Input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
Display:none;
}
They were used to control the two icon at the end of the search box:
In fact, the previous Search button, is associated with the results property of input, remove this attribute can also be.
Custom placeholder Style
HTML5 form of the placeholder properties is very useful, but the basic everyone also follow the browser's UA style, in fact, you can use a pseudo element to change this default performance:
::-webkit-input-placeholder {
/*place Your style here*/
}
::-moz-input-placeholder {
/*place Your style here*/
}/*firefox Support too*/
In addition, one of the details is that for placeholder text, the FIREFOX/OPERA/IE9 is hidden in the input box focus, and chrome is only hidden when typing in any text, to the chrome community feedback, The chrome developer says it's follow the behavior of Safari under OS X Lion and iOS ... But the Windows version of Safari is the focus of the hidden ...
The description of placeholder in the standard of the consortium refers to:
User agents should present this hint to the user, after has stripped line breaks from it, when the element "s value is t He empty string and/or to the control isn't focused (e.g. by displaying it inside a blank unfocused control and hiding it ot Herwise). Via
So, it seems that the behavior of Firefox/opera and other browsers is more "correct"--although here is indifferent to the wrong, but the user's operating habits.
Not only did I feed the bug to the chromium community, but it appears that Chrome is not going to fix it, so if we want to keep the WebKit and other browsers consistent, we can fix it:
Input:focus::-webkit-input-placeholder {color:transparent;}
Conclusion
Of course, no browser is perfect, Huaxia diamond shop and WebKit will be more opportunities to deal with more and more, although there are some similar very trivial interface correction, but WebKit's advantage is to provide a more private style (although not all of the CSS3 draft) Let us be more free to customize, and on the other hand, for the recent hot WebKit action, if other browsers are compatible with these less standardized behavior, we certainly do not want to see it.