看到一些網頁上用於搜索的輸入框比較漂亮，在框裏面有一個用於搜索的圖片，一點圖片就開始搜索了，但網頁標準的輸入框（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，可以單獨刪除。
