mess.png

    right.png

    wrong.png

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <style>
    10.         div {
    11.             width: 600px;
    12.             margin: 100px auto;
    13.         }
    15.         .message {
    16.             display: inline-block;
    17.             font-size: 12px;
    18.             color: #999;
    19.             background: url(images/mess.png) no-repeat left center;
    20.             padding-left: 20px;
    21.         }
    23.     </style>
    24. </head>
    26. <body>
    27.     <div class="register">
    28.         <input type="password" class="ipt">
    29.         <p class="message">请输入6~16位密码</p>
    30.     </div>
    32. </body>
    34. </html>