Here is a wave login box below we will imitate under password set the output of this one!
Still will be used form elements
And p tag prompted mainly used
p.className = "a a1"; to add the class name of the element properties:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <style type="text/css"> div{ width: 600px; margin:90px auto; } .a{ display:inline-block; font-size: 12px; color: #999; background: url(img/b.png) no-repeat left center; background-size: contain; padding-left: 20px; } .a1{ color: red; background-image: url(img/k.png); } .a3{ color: green; background: url(img/b.png); } </style> <title>Document</title> </head> <body> <div class=""> <input type="password" name="" id="" value="" class="a2"/> <p class="a">请输出六至十六位密码</p> </div> <script type="text/javascript"> var ipt = document.querySelector("input"); vardocument.querySelector = P ( " " ); ipt.onblur = function () { IF (ipt.value.length> 16 || ipt.value.length < . 6 ) { p.className = " A A1 " ; p.innerHTML = " Please enter the correct password " } the else { p.className = " A A2 " ; p.innerHTML = " correct format " } }p </ Script> </ body> </html>
Here is the original page you can change the original cross in the picture would be better!
