输入框的写法

代码如下
<div class="jd-header">
            <!-- 搜索框 100% 自适应 -->
            <div class="header-inner">
                <!-- 搜索框盒子 -->
                <div class="search-bar">
                    <form action="#">
                        <input type="text" placeholder="牛奶">
                    </form>
                </div>
                <!-- 京东图标 -->
                <div class="search-bar-img">
                    <img src="./img/2.png" alt="">
                </div>
                <span>|</span>
                <!-- 放大镜图标 -->
                <div class="fdj"></div>
            </div>
            <!-- 菜单按钮 -->
            <div class="menu">
                <span class="sprites_menu"></span>
            </div>
            <!-- 登录按钮 -->
            <div class="login-box">
                <span>登录</span>
            </div>
        </div>

样式如下
.jd-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    height: 44px;
    background-color: transparent;
    .header-inner {
        width: 100%;
        height: 44px;
        padding: 7px 40px ;
        .search-bar {
            width: 100%;
            border-radius: 20px;
            height: 30px;
            overflow: hidden;
            form {
                input {
                    width: 100%;
                    height: 30px;
                    padding-left: 70px;
                }
            }
        }
        .search-bar-img {
            position: absolute;
            top: 14px;
            left: 50px;
            img {
                width: 20px;
                height: 15px;
            }
        }
        span {
            position: absolute;
            top: 13px;
            left: 75px;
            color: #e0e0e0;
        }
        .fdj {
            position: absolute;
            top: 14px;
            left: 85px;
            width: 17px;
            height: 15px;
            background: url(../img/3.png) no-repeat;
            // 精灵图的距离减小一半
            background-position: -122px 0px;
            // 整张精灵图的大小缩小一倍
            background-size: 200px 200px;
        }
    }
    .menu {
        position: absolute;
        left: 0;
        top: 0;
        width: 40px;
        height: 44px;
        .sprites_menu {
            display: inline-block;
            width: 20px;
            height: 16px;
            background: url(../img/1.png) no-repeat;
            // 原尺寸 40px*32px 一半 20*16px
            background-size: 20px 16px;
            margin: 14px 0px 0px 10px;
        }
    }
    .login-box {
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 44px;
        font-size: 14px;
        color: #fff;
        line-height: 44px; 
        text-align: center;
    }
}

上图就是代码的效果，背景色是透明的