I am new to CSS and I'm currently working on styling my Login page. Everything works fine when I keep the code as it is, but I want to change the password input field type to "password" for security reasons. However, when I do this, the CSS styles are not being applied to the password textbox.
.content input[type=text], .content input[type=password] {
height: 30px;
border: 0;
margin-top: 2.5vh;
margin-left: 4.5vw;
border-radius: 20px;
}
.content input[type=submit] {
color: white;
margin-left: 7vw;
margin-top: 2vh;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 15px;
padding-right: 15px;
border-radius: 6px;
border: 1px solid;
background-color: black;
justify-content: center;
}
.content input[placeholder] {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
border: 1px solid;
padding-left: 1vw;
font-size: 13px;
}<div class="content">
<h2>Sign In</h2>
<input name="username" type="text" id="username" placeholder="Username" /><br />
<input name="password" id="password" placeholder="Password" Type="password" /><br />
<input type="submit" name="Submit" value="Submit" id="Submit" /><br />
</div>