/*搜索数据框*/ .search_ipt { width:275px; height:20px; padding-top:3px; font-size: 14px; border-style: inset; border-width: 1px; border-bottom-color: #555; border-right-color: #555; } /*聚焦效果*/ .search_ipt:FOCUS { border-style:solid; border-width:2px; border-color:#6694E3; } /*模拟立体按钮*/ .btn_m { position: relative; z-index:1; height:20px; width:80px; border: 1px solid #CCC; text-align: center; cursor:pointer; -moz-border-radius:3px; /*简单点针对FF圆角*/ } .btn_m:hover { border-color: #888; } .btn_m .top { position: absolute; z-index:-1; top:0px; left:0px; height:10px; width:100%; background-color: #F9F9F9; } .btn_m .bot { position: absolute; z-index:-1; top:10px; left:0px; height:10px; width:100%; background-color: #EEEEEE; }
上面是样式,下面是使用方法:
<div style="padding-top:35px;">
<input type="text" class="search_ipt fleft"/>
<div class="btn_m fleft" style="margin-top:2px;margin-left:5px;"><div class="top"> </div><div class="bot"> </div>搜索内容</div>
<div class="btn_m fleft" style="margin-top:2px;margin-left:5px;"><div class="top"> </div><div class="bot"> </div>搜索标题</div>
<div style="float:left;margin-top:2px;margin-left:5px;"><a href="javascript:_();">高级搜索</a></div>
</div>
效果图: