普通搜索框

点击搜索框隐藏默认文本

CSS样式：

<style>
    *{margin: 0; padding: 0;}
    input,button{border: 0 none;}
    .search{
        width: 281px;
        height: 37px;
        border: 1px solid #e7e5e1;
        margin: 100px auto;
        position: relative;
        border-radius: 3px;
    }
    .search input{
        width: 220px;
        height: 35px;
        line-height: 35px;
        outline-style: none;/*input框去掉外边蓝色边框*/
        padding-left: 17px; /* 文字距离左边框17px  加padding-left时别忘了width减去17px;*/
        color: #ccc;
    }
    .search button{
        width: 57px;
        height: 37px;
        background: url(images/right.png) no-repeat;
        float: left;
        cursor: pointer;
        display: inline;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

HTML代码：

<div class="search">
    <input type="text" value="请输入关键词搜索">
    <button></button>
</div>

js：

var txt = document.getElementById("text");
    txt.onfocus = function() { //得到焦点           
        if (txt.value == "请输入关键词搜索") {   // 如果input里面的文字 是“请输入关键词搜索” 说明用户没有用过，就清空
            txt.value = "";
            txt.style.color = "#333";
        }
    }
    txt.onblur = function() { //失去焦点                
        if (txt.value == ""){    //input的值是 空的时候，我们再复原      
            txt.value = "请输入关键词搜索";
            txt.style.color = "#ccc";
        }
    }