<!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>
输出效果：
