看到一些网页上用于搜索的输入框比较漂亮，在框里面有一个用于搜索的图片，一点图片就开始搜索了，但网页标准的输入框（html的text对象）里面是不能放其它对象的，这是怎么实现的呢？
其实实现起来并不复杂。最外面用一个带有边框的div，边框的效果和输入框的边框看上去是一样的，在里面放一个没有边框的text，在text右边放一个图片或者带有图片的button，效果就出来了。需要注意的是位置要排列好，这样视觉效果才不错。代码如下：
<html>
<head>
<style type="text/css">
.borderBox{border:1px solid #808080;height:25px;width:230px;}
.inputBox{float:left;border:0;color:#333;font-size:100%;width:200px;height:24px;}
.searchBox{background:url(../images/searchImg.png);height:24px;width:24px;overflow:hidden;border:0px;margin:0px}
</style>
</head>
<body>
<div class="borderBox">
<input class="inputBox" name="q" title="请输入查询条件" type="text" value="" />
<input class="searchBox" name="go" tabindex="0" title="查询" type="submit" value="" />
</div>
</body>
</html>
<head>
<style type="text/css">
.borderBox{border:1px solid #808080;height:25px;width:230px;}
.inputBox{float:left;border:0;color:#333;font-size:100%;width:200px;height:24px;}
.searchBox{background:url(../images/searchImg.png);height:24px;width:24px;overflow:hidden;border:0px;margin:0px}
</style>
</head>
<body>
<div class="borderBox">
<input class="inputBox" name="q" title="请输入查询条件" type="text" value="" />
<input class="searchBox" name="go" tabindex="0" title="查询" type="submit" value="" />
</div>
</body>
</html>
其效果如下：
在开心网（
www.kaixin001.com）的短信息里面，输入短信息的选择好友输入框，比上面的要复杂一些：
输入框的外面也是一个带有边框的div，里面的text是隐藏的，当得到输入焦点时，text才显示出来，失去输入焦点时隐藏。另外，输入的每一项是一个span，可以单独删除。
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
