HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>blur simple</title>
</head>
<body>
  <form id="form">
    <label>
      Some text:
      <input type="text" placeholder="text input" />
    </label>
    <label>
      Password:
      <input type="password" placeholder="password" />
    </label>
  </form>
  <script>
    var password = document.querySelector('input[type="password"]');
    password.addEventListener("focus", function (event) {
      event.target.style.background = "pink";
    });
    password.addEventListener("blur", function (event) {
      event.target.style.background = "";
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element blur — focus + blur styles (Try It)