<body>
  <section class="s-f">
    <form>
      <label for="username">ユーザー名:</label>
      <input class="inp" type="text" id="username" name="username"><br><br>
    
      <label for="password">パスワード:</label>
      <input class="inpf" type="password" id="password" name="password"><br><br>
    
      <input type="submit" value="ログイン">
    </form>
  </section>
</body>
.s-f{
 padding: 50px 0;
}

.s-f form{
 width: 70%;
 margin: auto;
}
.inp:focus-visible{
 border: 2px solid blue;
 outline: none;
 box-shadow: 0px 0px 5px blue;
}

.inpf:focus{
 border: 2px solid rgb(189, 23, 189);
 outline: none;
 box-shadow: 0px 0px 5px rgb(196, 13, 159);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.