HTML表单中文本输入类型的CSS不起作用

input[type=text],
input[type=password] {
  transition: height 0.4s ease-in-out, width 0.4s ease-in-out, background 0.4s ease-in-out;
  padding: 18px;
  height: 20px;
  width: 150px;
  border-bottom: 2px solid #FFD800;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  background-color: #E2E2E2;
  color: dimgray;
}

input[type=text]:focus,
input[type=password]:focus {
  height: 30px;
  width: 200px;
  animation-name: smooth;
  background-color: #FFD800;
  animation-duration: 0.5s;
  animation: smooth 0.5s forwards;
  color: black;
}

<div>

  <form action="" autocomplete="off" method="POST">

    <br><br>
    <h2 align="center">Login</h2><br>
    <input type="text" placeholder="Username" name="Username"><br><br>
    <input type="password" placeholder="Password" name="Password"><br><br>
    <input type="submit" value="submit" name="submit">

  </form>

</div>