自定義webkit搜尋框樣式
好吧，這是個有點兒蛋疼的文章，每個瀏覽器都可以有自己的行為和表現，只是webkit在apple的帶領下，在UI上走的更遠了一點兒，但是卻給我們帶來了點兒困擾，因為很多情況下，我們希望搜尋框在所有的瀏覽器上表現一致。。。
用過mac的同學應該瞭解這個情況：
就拿前端觀察右上角的搜尋框來說，在Windows下和mac下的表現就完全不一樣啊，mac下(包括safari和chrome)，除了寬度外，你設定的其它樣式基本是無效的，這種細長的介面和iOS上的搜尋框是一樣的，或許蘋果認為，搜尋框就應該是這樣的？
那我們在很多情況下需要讓頁面在所有平臺，所有瀏覽器下表現都基本一致，這就有點兒悲催了，但是也不是沒有辦法的。。。
方法一：不用type=search
這是最簡單的一了百了的做法，使用預設的type=text吧，這樣你就可以像定義普通文字框那樣定義搜尋框了，不足的地方是，搜尋的使用者體驗也不太一樣了，同時也會影響到其它瀏覽器。
方法二：-webkit-appearance
但是方法一對於語義控來說是無法接受的吧，那麼我們也可以用CSS3 appearance來解決，這是個很有用的東西啊。
對於設定type=search的搜尋框，webkit的appearance設定是：
-webkit-appearance: searchfield;
我們將其設定為：
-webkit-appearance: textfield;
即可。
貌似這是最完美的方法了
方法三：各種偽元素
webkit的一大優點就是提供了豐富的偽元素來定義一些UI，對於搜尋框來說，也有一些可用的：
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; }
它們分別用來控制搜尋框首尾的兩個icon：
其實，前面的搜尋按鈕，是和input的results屬性關聯的，去掉該屬性亦可。
自定義placeholder樣式
HTML5表單的placeholder屬性是非常好用的，但是基本大家也都follow瀏覽器的ua樣式了，其實可以用一個偽元素來改變這個預設的表現：
::-webkit-input-placeholder { /place your style here/ } ::-moz-input-placeholder { /place your style here/ }/firefox support too/
另外，有個細節，就是對於placeholder的文字，Firefox/Opera/IE9在輸入框focus的時候會隱藏，而chrome卻只有在輸入任何文字的時候才會隱藏，到Chrome社群反饋了下，Chrome開發人員說是follow了OSX Lion和iOS下Safari的行為。。。但是Windows版的Safari卻是focus時隱藏的。。。
W3C規範中對於Placeholder的描述中提到：
User agents should present this hint to the user, after having stripped line breaks from it, when the element’s value is the empty string and/or the control is not focused (e.g. by displaying it inside a blank unfocused control and hiding it otherwise).via
所以，看來Firefox/Opera等瀏覽器的行為是比較“正確”——雖然這裡無所謂對於錯，只是使用者操作習慣的問題。
不止我自己向Chromium社群反饋這個bug，但是看來Chrome是不準備fix的，那麼如果我們要讓webkit和其它瀏覽器的行為保持一致，也是可以修正的：
input:focus::-webkit-input-placeholder { color: transparent; }
結語
當然沒有一個瀏覽器是完美的，我們以後和webkit打交道的機會會越來越多，雖然有一些類似的很瑣碎的介面修正，但是webkit的優點是提供了比較多的私有樣式(雖然並不全部是CSS3草案中的)讓我們可以更自由的自定義，而從另一方面，對於最近火熱的反webkit行動來說，如果其它瀏覽器相容了這些不太標準化的行為的話，大家肯定是不願意看到的吧。