今天我將介紹一下如何使用css中的背景來設計你的搜尋框。之前我使用別的方法來實現我的表單和搜尋框，但是這種方法看起來會更容易些，所以我想將它與感興趣的朋友分享。
view demo
原始方式
首先來讓我們看看我的原始的使用的方法：
改良方法
在這個改良版的方法中，我決定不再使用 type=」image」 ，而是使用標籤，然後用css新增背景。這允許文字輸入框和按鈕自動對齊。我同樣新增了a:focus偽類到最終效果(ie將不會支援這個，所以我新增了乙個特殊的樣式針對ie來隱藏這個效果)。 下面是這種方法的一些好處:
html
fieldset.search
.search
input,
.search
button
.search
input.box
.search
input.box
:focus
.search
button.btn
.search
button.btn
:hover
.search
input.box
css布局 搜尋框製作
對搜尋框的製作 我們要實現下面的搜尋框，我們首先去考慮怎麼布局，以及 的優化。製作這個搜尋框方法很多，可以抹掉文字擷取整個大框作為乙個div的背景圖，在寫入內容即可 也可以直接用div來裝內容，設定圓角即可。提供的兩種方法都可以，也比較簡單。我的做法就是用乙個大的div裝住裡面的三個部分，左邊綠色框...
關於css搜尋框製作
搜尋框製作有二種方案 思路 都是通過乙個div包含input標籤，使得寬高一致。這裡div input都要使用怪異盒子box sizing border box 從而讓內邊距不影響整個盒子大小。第一種 通過給div設定背景顏色，利用padding內邊距使input盒子向下壓縮從而顯示邊框為paddi...
使用jquery ajax php實現搜尋框的功能
我們每天瀏覽網頁都能見到搜尋框 搜尋框的原理 客戶端 輸入要搜尋的關鍵字於文字框，然後文字框將關鍵字獲取，使用ajax傳送請求到服務端，然後根據服務端返回來的資訊顯示到乙個div中 服務端 接收傳過來的資料，然後在資料庫中搜尋，再返回資料給客戶端 首先是客戶端 新建乙個輸入框 在輸入框的下面建立乙個...