CSS for text input type in HTML form not working [duplicate]

Question

I have the below CSS for an HTML form:

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], 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 class="body">
  <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>

However, only the password field looks as it should.

Here is a snippet of what I see

Please advise. Thank you.

Answer 1

Welcome to Stack Overflow and great first question including code.

You're missing the :focus on input[type=text] to add the styling when focusing on text input.

Change

input[type=text],
input[type=password]:focus

to

input[type=text]:focus,
input[type=password]:focus

and it will work.

Working example:

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 class="body">

  <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>