好多網站的搜索輸入框設計的很漂亮,接下來筆者將逐步介紹如何設置自己的搜索輸入框.

設計效果圖:

該效果主要采用CSS樣式與Javascript進行實現.不得不說CSS樣式功能很強大,而且效果很炫,筆者推薦一本書叫《CSS禪意花園》,你可以從中感悟CSS的唯美之處.

我們分步來介紹如何實現.

第一步：如何實現帶提示信息的輸入框

我們知道輸入框在html中使用<input type=”text” >標簽定義,針對輸入框我們常用的事件為觸焦,和脫焦.

我們從其它網站這塊應用可以看出,當輸入框獲得焦點時提示信息就消失了,當輸入框失去焦點時輸入框中的提示信息就出現了.

所以我們只需要對不同的事件,添加不同的CSS樣式,效果就可以完成了.

代碼如下:

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表