HTML form input type="password" CSS not working

Question

I am trying to add CSS to the following 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;
  color: dimgray;
}

input[type=text],
input[type=password] :focus {
  animation-name: smooth;
  background-color: #FFD800;
  color: black;
}

<form action="dashboard.php" autocomplete="off" method="POST">

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

</form>

The CSS works for input type="text" but not input type="password". Please advise.

Thank you!

Sorry, that's an extra bit of code I had copied in. Any suggestions as to my question? Thank you! — Bob
– Bob, Commented Dec 10, 2020 at 7:28
Can you be more descriptive for your issue. Which css is not working? — Master.Deep
– Master.Deep, Commented Dec 10, 2020 at 7:30

Ahmad Habib · Accepted Answer · 2020-12-10 07:30:40Z

3

Check this now, you have un necessary space between input[type=text], input[type=password] and :focus which was the issue that focus css was not applying:

  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;
        color: dimgray;
    }
    input[type=text], input[type=password]:focus {
        animation-name: smooth;
        background-color: #FFD800;
        color: black;
    }

<form action="dashboard.php" autocomplete="off" method="POST">
                    
    <br><br><h2 align="center">Login</h2><br>
    <input type="password" placeholder="Username" name="Username"><br><br>
    <input type="password" placeholder="Password" name="Password"><br><br>
    <input type="submit" value="Submit">
            
</form>

Working Fiddle

answered Dec 10, 2020 at 7:30

Ahmad Habib

2,5103 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bob Over a year ago

Solved! Thank you!

Bob Over a year ago

Done, I've marked it as accepted! Thank you for your time!

About7Codes · Accepted Answer · 2020-12-10 08:11:27Z

0

Firstly, change the User input to "text" type. Secondly, remove space between the input[type=text], input[type=password] and :focus elements over 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;
        color: dimgray;
    }
    input[type=text]:focus, input[type=password]:focus {
        animation-name: smooth;
        background-color: #FFD800;
        color: black;
    }

<form action="dashboard.php" autocomplete="off" method="POST">
                    
    <br><br><h2 align="center">Login</h2><br>

    <!--  change type from "password" to "text"  -->
    <input type="text" placeholder="Username" name="Username"><br><br>                                   
    <input type="password" placeholder="Password" name="Password"><br><br>
    <input type="submit" value="Submit">
            
</form>

answered Dec 10, 2020 at 8:11

About7Codes

1143 bronze badges

2 Comments

Bob Over a year ago

Removing the space solved the issue. Thank you!

About7Codes Over a year ago

Kindly tick the answer which has solved your issue. Thanks.

Alan Yong · Accepted Answer · 2020-12-10 07:30:18Z

-1

try this

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;
    color: dimgray;
} 

input[type=text]:focus, 
input[type=password]:focus {
    animation-name: smooth;
    background-color: #FFD800;
    color: black;
}

answered Dec 10, 2020 at 7:30

Alan Yong

1,0532 gold badges13 silver badges26 bronze badges

2 Comments

law_81 Over a year ago

Using only try this doesn't help the OP... add some explanation please

Alan Yong Over a year ago

just some spacing issue. not big deal

Collectives™ on Stack Overflow

HTML form input type="password" CSS not working

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related