1、首先，用div標簽在網頁中，插入一個可以輸入文本的搜索框。

2、在標簽中設置搜索框的標識，標識名為lookuptxt。

3、設置搜索框以左側為基準浮動，襯距為20像素。

4、用input插入輸入文本框，類型為文本，標識為choosetxt。

5、輸入文本框離左側的襯距為10像素，高度為22像素，寬度為180像素，離頂部的襯距為16像素。

6、邊框的寬度設置為2像素，顏色為藍色，輸入框的背景色設置為00ffff。

7、接著，用div標簽插入搜索按鈕，標識符為lookupbtn。

8、搜索按鈕以左側為基準浮動，寬度為60像素，高度為22像素。

9、按鈕的顏色設置為藍色，字體為20像素，離頂部和左側的襯距都設置為22像素。

10、單擊搜索按鈕后，運行搜索命令，用函數Btnselect實現搜索功能

11、最后，不要忘了插入搜索按鈕的文本。

12、在網頁中瀏覽程序，在頂部顯示輸入文本框和搜索按鈕，實現搜索欄的功能。

1、打開Hbuilder編輯器，創建一個input框和button按鈕，將它們橫排擺放在一起：

2、首先給input框添加“#7FCC0B”顏色的邊框，設置寬度和高度即可，給button按鈕設置白色的字體和“#7FCC0B”的背景顏色即可完成：

3、按crtl+s，在軟件的右側即可看到最終的效果。以上就是用html制作搜索框的演示：

css選擇器加.是類選擇器，選擇與class屬性相匹配的類名

可以在設置頁面選擇恢復初始功能。