My HTML and CSS are below; it was working but suddenly it stopped, I tried to remove everything that I coded after this code and it's still not working :(

.email:focus {
  border-color: #1877f2;
  box-shadow: 0 0 0 2px #e7f3ef;
}

.pass:focus {
  border-color: #1877f2;
  box-shadow: 0 0 0 2px #e7f3ef;
}

<div >
  <input  type="text" name="email" id="email" placeholder="Email or phone     number" autofocus="1" aria-label="Email or phone number" autocomplete="off" required>
  <input  type="password" name="pass" id="pass" placeholder="Password" aria-label="password" autocomplete="off" required>
</div>

I tried to make the input border blue when the cursor is on it, like FaceBook login page, it was working and then stopped.

CodePudding user response：

.email:focus {
  border: 2px solid #1877f2;
  outline: none;
  box-shadow: 0 0 0 2px #e7f3ef;
}

.pass:focus {
  border: 2px solid #1877f2;
  outline: none;
  box-shadow: 0 0 0 2px #e7f3ef;
}

<div >
  <input  type="text" name="email" id="email" placeholder="Email or phone     number" autofocus="1" aria-label="Email or phone number" autocomplete="off" required>
  <input  type="password" name="pass" id="pass" placeholder="Password" aria-label="password" autocomplete="off" required>
</div>