HTML淘宝搜索框

<div style="overflow:hiddenclear:bothbackground:#ffffont-family:arialcolor:#646464zoom:1border:1pxsolid #008ffe">

<div style="float:leftpadding:14px 10px 0 15px_padding:16px 10px 015px">

<h3>本店搜索</h3>

</div>

<div style="float:leftpadding-bottom:10px"><form method="get"action="店铺地址/category.htm" name="SearchForm"><input type="hidden" value="y" name="search">

<ul>

<li style=" overflow:hiddenmargin-top:10pxfloat:left">

<label for="keyword"> <input type="text"class="keyword-input J_TKeyword prompt" value=""autocomplete="off" name="keyword" size="18"style="height:20pxline-height:20pxwidth:260pxmargin-right:6pxtext-indent:4pxcolor:#333background:#FFFborder:1px solid #ddd">

</label>

</li>

<li style=" overflow:hiddenmargin-top:10pxfloat:left"><input type="submit" class="J_TSubmitBtn btn" value="搜索"style="background:#555555width:48pxheight:22pxline-height:22pxmargin-left:10pxborder:nonecolor:#FFFfont-weight:700cursor:pointer">

</li>

</ul>

</div>

</div>

<input type="text" class="aa" /><input type="button" value="search" />

.aa{width:100pxheight:20pxboder:solid 1px #f00}//定义搜索框的大小高度以及边框颜色。

思路是：

放大镜图标用个img写进来或者用其它标签用CSS做背景也可以；

下拉导航这种效果系统的Select下拉是最容易想到的，但是别想着用它做，，原因很简单，做不到的，，这个必须借助JS辅助来解决！

定义一个input和submit。通过css去掉边框，然后添加背景。那个一点击就消失的文字是js添加的特效。自己写对新手有难度，而且容易溢出。推荐直接到懒人图库等素材站下载别人做好的改动一下即可。反正这种框子基本上都是大同小异。

---