CODEWITHSUNDEEP
htmlcssforms
Bob
Bob

Reputation: 71

HTML form input type="password" CSS not working

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!

Upvotes: 0

Views: 1686

Answers (3)

About7Codes
About7Codes

Reputation: 114

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>

Upvotes: 0

Ahmad Habib
Ahmad Habib

Reputation: 2384

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

Upvotes: 3

Alan Yong
Alan Yong

Reputation: 1033

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

Upvotes: -1

Related Questions