随着HTML5的深入人(rén)心，越來(lái)越多(duō)的新功能得(de)以應用。HTML5與CSS3相結合可(kě)以非常簡單的實現很(hěn)多(duō)超酷的效果。本文為(wèi)您講解使用HTML5和(hé)CSS3打造自動獲得(de)焦點、支持語音(yīn)輸入的超酷的搜索框。

HTML

我們在頁面中放置一個(gè)搜索表單form，在表單中分别有(yǒu)一個(gè)輸入框以及一個(gè)搜索按鈕。

細心的您會(huì)發現輸入框input中多(duō)了三個(gè)屬性，分别是placeholder，autofocus，x-webkit-speech，它們有(yǒu)着不同的作(zuò)用。

placeholder：是為(wèi)了設置初始值，并且這個(gè)初始值的顔色為(wèi)灰色，當輸入框input的內(nèi)容變動時(shí)，這個(gè)值就消失。

autofocus：自動聚焦，當進入當前頁面時(shí)，這個(gè)搜索輸入框會(huì)自動獲取焦點，而你(nǐ)可(kě)以在打開(kāi)頁面後直接輸入關鍵字按回車(chē)鍵進行(xíng)搜索。當autofocus出現兩次以上(shàng)的時(shí)候，浏覽器(qì)會(huì)選擇最後一個(gè)帶有(yǒu)autofocus屬性的輸入框input聚焦。

x-webkit-speech：webkit核的浏覽器(qì)（如Chrome）特有(yǒu)的語音(yīn)識别工具，使用x-webkit-speech後，在輸入框的右側會(huì)出現一個(gè)小(xiǎo)話(huà)筒，點擊話(huà)筒，會(huì)提示“請(qǐng)開(kāi)始說話(huà)”，用戶可(kě)以通(tōng)過麥克風輸入語音(yīn)，浏覽器(qì)會(huì)自動識别語音(yīn)內(nèi)容，并将識别的結果顯示在輸入框中。

以前需要借助一大(dà)段Javascript代碼來(lái)實現的聚焦和(hé)輸入光标移開(kāi)輸入框的交互效果，而使用HTML5則隻需要設置幾個(gè)屬性一切就OK了。

CSS

單單隻是設置屬性和(hé)實現功能還(hái)不夠，我們可(kě)以用CSS3來(lái)對搜索框進行(xíng)美化，讓它更有(yǒu)親和(hé)力。

.search_form{position:relative; height:31px; margin:60px;display:inline-block;}
.search_form:hover{-webkit-box-shadow:0 0 3px #999;-moz-box-shadow:0 0 3px #999}
.sinput{float:left; width:200px; height:21px; line-height:21px; padding:4px 7px; color:b3b3b3; 
border:1px solid #999; border-radius:2px 0 0 2px; background-color:#fbfbfb;}
.sbtn{float:left; width:50px; height:31px; padding:0 12px; margin-left:-1px; 
border-radius:0 2px 2px 0; border:1px solid #4d90fe; background-color:#4d90fe; cursor:pointer; 
display:inline-block; font-size:12px; vertical-align:middle; color:#f3f7fc;position:absolute;}
.sbtn:hover{background:#4084f2}

我們使用CSS3給搜索框設置鼠标滑上(shàng)去的陰影(yǐng)效果，輸入框圓角效果，搜索按鈕鼠标滑上(shàng)的效果。當然，為(wèi)了兼容其他浏覽器(qì)您可(kě)能還(hái)要在CSS上(shàng)進行(xíng)一些(xiē)處理(lǐ)，就如同本站(zhàn)helloweba的搜索框。

好了，看到最終效果了吧(ba)，趕緊動手，您可(kě)以複制(zhì)本demo的代碼，大(dà)膽的應用到您的網站(zhàn)上(shàng)去吧(ba)。