预计效果

your text

难点

  1. 自动获焦
  2. 搜索框内显示文字和图标
  3. 输入文字后,显示文字和图标消失
  4. 清空文字后,显示文字和图标出现
  5. 点击显示文字或图标可以到搜索框输入开始位置
  6. 鼠标移动到显示文字或图标鼠标格式是text格式

设计

基本设计就是一个div+button做搜索框,然后叠加一个label在搜索框内部(用来显示文字和图标)

<div class="test-box">
    <div class="search-bar">
        <input id="search_text" type="text" />
        <label for="search_text">春天不可少的护理</label>
    </div>
    <button class="btn-search">搜索</button>
</div>

这里用一个text-box套住(用来设置展示位置,显示的漂亮点,没其他功能),里面两个部分,一部分是前面的搜索框,一部分是后面的按钮,按钮和搜索框都是浮动。

注意:下面的*{}这种写法是十分不推荐的,应该使用清空样式的css,这里为了简化这样写。

通过一个label的绝对定位,来将文字显示在搜索框内 (当然,如果只要显示文字,也可以用html5的placeholder属性) 。同时把label的for属性设置为对应的input标签可以解决点击显示文字或图标可以到搜索框输入开始位置的情形。

     *{padding:0;
            margin:0;}
        .test-box{
            margin:100px 100px;
            overflow: hidden;
        }
        .search-bar{
            float: left;
            position: relative;
            overflow: hidden;
        }
        .search-bar input{
            float: left;
            width: 400px;
            height: 30px;
            border:2px solid #ff4200;
            padding-left:10px;
        }
        .search-bar label{
            position: absolute;
            top:6px;
            left:20px;
            font-size:14px;
            color:#999;
        }
        .btn-search{
            float: left;
            height:34px;
            width:100px;
            background: #ff4200;
            color: #fff;
            font-size:16px;
            border:none;
        }

显示效果

your text

细节调整

输入框的蓝边框

输入框的蓝边框不好看,用outline:none取消

输入框显示图标

思路很多:

  1. 可以用:before伪元素里面加背景,背景大小设为cover

    label:before{
               content:"";
               display: inline-block;
               width:14px;
               height:14px;
               margin-right:4px;
               background: url(search_icon.png) no-repeat 0 2px;
               background-size:cover;

your text

  1. 可以直接在label的padding里加个背景,背景大小设为contain
     .search-bar label{
            position: absolute;
            top:6px;
            left:20px;
            font-size:14px;
            color:#999;
            cursor:text;
            padding-left:20px;
            background: url(search_icon.png) no-repeat 0 2px;
            background-size:contain;
        }

your text

鼠标移动到显示文字上显示指针为I

设置labelcursor:text

自动获焦点

设置inputautofocus="autofocus",一个页面只能有一个。

your text

为了兼容问题,可以用js设置focus()方法,自动获得焦点:

  window.onload = function () {
        function $(id) {
            return document.getElementById(id);
        }
        $('search_text').focus();
    }

输入文字,显示的文字消失和显示

使用oninput()事件

   window.onload = function () {
        function $(id) {
            return document.getElementById(id);
        }
        var search_input = $('search_text')
        search_input.oninput = function () {
            if(search_input.value !== "")
            {
                $("search_label").style.display = 'none';
            }
            else{
                $("search_label").style.display = 'block';
            }
        }
    }

完整代码

里面的搜索小图标,自己可以去网上下,我这里提供一个搜索图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding:0;
            margin:0;}
        .test-box{
            margin:100px 100px;
            overflow: hidden;
        }
        .search-bar{
            float: left;
            position: relative;
            overflow: hidden;
        }
        .search-bar input{
            float: left;
            width: 400px;
            height: 30px;
            border:2px solid #ff4200;
            padding-left:10px;
            outline:none;
        }
        .search-bar label{
            position: absolute;
            top:6px;
            left:20px;
            font-size:14px;
            color:#999;
            cursor:text;
            padding-left:20px;
            background: url(search_icon.png) no-repeat 0 2px;
            background-size:contain;
        }
        .btn-search{
            float: left;
            height:34px;
            width:100px;
            background: #ff4200;
            color: #fff;
            font-size:16px;
            border:none;

        }
        /*label:before{*/
            /*content:"";*/
            /*display: inline-block;*/
            /*width:14px;*/
            /*height:14px;*/
            /*margin-right:4px;*/
            /*background: url(search_icon.png) no-repeat 0 2px;*/
            /*background-size:cover;*/
        /*}*/
    </style>
</head>
<body>
<div class="test-box">
    <div class="search-bar">
        <input id="search_text" type="text"/>
        <label for="search_text" id="search_label">春天不可少的护理</label>
    </div>
    <button class="btn-search">搜索</button>
</div>
<script>
    window.onload = function () {
        function $(id) {
            return document.getElementById(id);
        }
        var search_input = $('search_text')
        search_input.focus();
        search_input.oninput = function () {
            if(search_input.value !== "")
            {
                $("search_label").style.display = 'none';
            }
            else{
                $("search_label").style.display = 'block';
            }
        }

    }
</script>

</body>
</html>