搜索框相关


<!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>类似上面这种方式可以

解决方案 »

  1.   

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

  2.   

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

  3.   


    <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();
        });