自定义带图标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>
输出效果：
AGxx

自定义带图标input样式
