自訂webkit搜尋方塊樣式

來源:互聯網
上載者:User

每個瀏覽器都可以有自己的行為和表現,只是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行動來說,如果其它瀏覽器安全色了這些不太標準化的行為的話,大家肯定是不願意看到的吧。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。