<style> .tutorial-wrapper{ width: 100%; } .tutorial-wrapper form{ background-color: #ffc; border: 1px solid #cc9; padding: 10px; font-family: verdana; width: 75%; font-size: 1em; } .field-wrapper{ margin: 2px 0 2px 0; padding: 0; } .tutorial-wrapper label{ float: left; text-align: right; margin: 0 5px 0 0; width: 30%; } .tutorial-wrapper input{ width: 200px; border: 1px solid #cc9; } .confirm-message{ margin: 0; padding: 0; font-size: .8em; } </style> <script type="text/javascript"> function checkPass() { //Store the password field objects into variables ... var password = document.getElementById('password2'); var confirm = document.getElementById('confirm2'); //Store the Confirmation Message Object ... var message = document.getElementById('confirm-message2'); //Set the colors we will be using ... var good_color = "#66cc66"; var bad_color = "#ff6666"; //Compare the values in the password field //and the confirmation field if(password.value == confirm.value){ //The passwords match. //Set the color to the good color and inform //the user that they have entered the correct password confirm.style.backgroundColor = good_color; message.style.color = good_color; message.innerHTML = '<img src="/wp-content/uploads/2019/04/tick.png" alt="Passwords Match!">'; }else{ //The passwords do not match. //Set the color to the bad color and //notify the user. confirm.style.backgroundColor = bad_color; message.style.color = bad_color; message.innerHTML = '<img src="/wp-content/uploads/2019/04/publish_x.png" alt="Passwords Do Not Match!">'; } } </script> <div class="tutorial-wrapper"> <form> <div class="field-wrapper"> <label for="password2">Password:</label> <input type="password" name="password" id="password2" onkeyup="checkPass();"> </div> <div class="field-wrapper"> <label for="confirm2">Confirm Password:</label> <input type="password" name="confirm" id="confirm2" onkeyup="checkPass();"> <span id="confirm-message2" class="confirm-message"></span> </div> </form> </div>