html制作一个搜索框，代码是什么？

1、打开Hbuilder编辑器，创建一个input框和button按钮，将它们横排摆放在一起：

2、首先给input框添加“#7FCC0B”颜色的边框，设置宽度和高度即可，给button按钮设置白色的字体和“#7FCC0B”的背景颜色即可完成：

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

.search/*整个搜索框*/{

width:300px

height:30px

background-image: url(../images/search.gif)/*这是这个搜索框的背景*/

background-repeat: no-repeat

background-position: 50%

margin-top: 10px

margin-right: 0px

margin-bottom: 0px

margin-left: 15px

padding: 0px

overflow: hidden

clear: both

}

.search input/*用来去掉搜索框里的文本框和按钮的背景和边框，并设置并列排放*/{

border:none

background:none

float:left

}

.search_box/文本框样式/{

width:150px

height:26px

line-height:26px

padding:0px

color:#999999

text-align:left

margin-top: 2px

margin-right: 15px

margin-bottom: 0px

margin-left: 10px

float: left

}

.search_button/*按钮样式*/{

width:45px

height:27px

cursor:pointer

color:#000000

font-size: 14px

}

具体样式可根据自己的需要调整。

希望对你有所帮助。

---