Written in front
Because the company's products need to be compatible with IE8 browser, when logging in, we found a problem. When input = text, the display of placeholder is normal, but when input = password, it becomes two points. Baidu and gg are many, some of them are simulated by lable, and others are simulated by location. We found that the problem of password as a point cannot be solved very well. After continuous attempts and reference to other products in IE 8 compatible processing. I'll sort it out as follows:
Compatible processing
Control the display and hiding of text by processing input focus and blur. The key ones are input {background: none;} and z-index.
z-index takes effect in the parent-child element. position: relative needs to be set in the parent element
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-1.9.1.js"></script> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background: #fff; z-index: 1; } input {background: none;} .box { height: 300px; width: 300px; background: #f2f2f2; margin: 0 auto; padding-top: 20px; } .child { position: relative; margin: 20px; z-index: 2; border: 1px solid #ccc; height: 35px; background: #fff; } .ds-input { border: none medium; font-family: verdana; ime-mode: disabled; width: 243px; height: 21px; line-height: 21px; color: #bebebe; font-size: 14px; position: absolute; top: 0px; left: 5px; padding: 7px 0; outline: none; } .tips { position: absolute; z-index: -999; top: 2px; _top: 4px; left: 5px; color: #C3C3C3; font-size: 14px; line-height: 33px; visibility: visible; cursor: text; padding-left: 4px; } </style> <script type="text/javascript"> $(function(){ $("input").focus(function(){ var id = "#tip_"+this.id; $(id).hide(); }); $("input").blur(function(){ var id = "#tip_"+this.id; if(this.value=="") { $(id).show(); } }); }); </script> </head> <body> <div class="box"> <div class="child"> <input type="text" class="ds-input" id="username" autocomplete="off"> <span class="tips" id="tip_username">Cell-phone number/mailbox</span> </div> <div class="child"> <input type="password" class="ds-input" id="password" autocomplete="off"> <span class="tips" id="tip_password">Password</span> </div> </div> </body> </html>
I hope it can help you.