搜索框相关

[y1018799688]

请问下如下搜索框是如何做的。右边有个搜索的图标，点击就可以进行搜索



谢谢

[qcxl]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
	<style type="text/css">
        .container{
                position:relative;
        }
        .search{
                background-image:url(search.png);
                position:absolute;
                width:25px;
                height:25px;
                top:2px;
                left:130px;
                z-index:99;
        }
</style>
</head>
<body>
<div class="container">
    <input type="text" value="aaa" class=""  /> 
    <div class="search"></div>
</div>
</body>
</body>
</html>

类似上面这种方式可以

[成都-狗蛋儿]

这样的问题，你应该去问做页面的人。。。CSS+XHTML的

[杜子寒]

<div style="
    position: relative;
"><input style="
    width: 200px;
"><img style="
    width: 22px;
    height: 22px;
    position: absolute;
    margin-left: -22px;
    cursor: pointer;
"></div>

[y1018799688]

谢谢楼上各位，现在还有个问题就是搜索框里面默认显示一段文字，但键盘输入的时候，就自动把默认显示的文字取消，请问这个是怎么做到的啊？

[杜子寒]

<div style="position: relative;" id="search">
        <input id="searchBox" type="text" style="width: 200px;">
        <label id="searchLabel" for="searchBox" style="position: absolute; left: 5px; color: lightgray;margin-top: 4px;" class="">
            搜索话题...
        </label>
        <img style="width: 22px; height: 22px; position: absolute; margin-left: -22px; cursor: pointer;margin-top: 2px;">
    </div>

$("#searchBox").keyup(function () {
        if ($(this).val().length == 0) {
            $("#searchLabel").css("display", "");
        }
        else
            $("#searchLabel").hide();
    });