自定义带图标input样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自定义带图标input样式</title>
        <style>
            .test{
                width: 400px;
                height: 400px;
                border: 3px solid #008000;
                margin: 0 auto;
                text-align: center;
            }
            
            .test:before{
                content: "";
                display: inline-block;
                vertical-align: middle;
                height: 100%;
            }
            
            .input{
                display: inline-block;
                vertical-align: middle;
            }
            
            .text{
                padding: 10px 35px;
                position: relative;
                z-index: 20;
                color: red;
            }
            
            .icon{
                display: block;
                position: absolute;
                padding: 0 0 0 25px;
                height: 40px;
                background: url('http://res.ckimg.com/sites/www/v2/images/passport/input_icon.png') no-repeat;
                z-index: 21;
            }
        </style>
    </head>
    <body>
        
        <div class="test">
            <div class="input">
                <label class="icon" for="id"></label>
                <input class="text" id="id"/>
                <span></span>
            </div>
        </div>
    </body>
</html>
输出效果：