How do I make text input box bigger with CSS?
Question
I've been learning web development for about a month now and I recently got stuck on something. I was making a simple login page as practice but when I try to make the input fields bigger, it doesn't do anything. This is my HTML and CSS code:
<!DOCTYPE html>
<html lang="en_US">
<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Isaac Guillen">
<!-- Link CSS -->
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<!-- Website Title -->
<title>My Website</title>
</head>
<body>
<section id="Login-Box">
<h1 class="login-txt">Login</h1>
<div class="usrname-input">
<input type="text" placeholder="Username">
</div>
<div class="passwd-input">
<input type="password" placeholder="Password">
</div>
<div class="submit-button">
<input type="button" value="Submit">
</div>
</section>
</body>
</html>
*{
margin: 0;
padding: 0;
color: black;
font-family: "Fira Code";
}
.login-txt{
font-size: 60px;
position: relative;
left: 1400px;
top: 150px;
}
.usrname-txt{
font-size: 40pt;
}
Can anyone help me? I don't know if I did anything wrong.
3 answers
solution1
0 2020-09-11 18:43:08
You are using a wrong class selector, try this css:
*{
margin: 0;
padding: 0;
color: black;
font-family: "Fira Code";
}
input{
font-size: inherit; /*Takes parent element's font size*/
}
.login-txt{
font-size: 60px;
position: relative;
left: 1400px;
top: 150px;
}
.usrname-input{ /*usrname-txt does not exists*/
font-size: 40pt;
}
solution2
0 ACCPTED 2020-09-11 18:46:53
Your problem is that you changed only the size of a different element not a textarea. You can correct it by adding a class to both textareas and than changing their width and height.
Just like this:
<!DOCTYPE html> <html lang="en_US"> <head> <!-- Meta Tags --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="Isaac Guillen"> <!-- Link CSS --> <link rel="stylesheet" type="text/css" href="../CSS/style.css"> <!-- Website Title --> <title>My Website</title> </head> <body> <section id="Login-Box"> <h1 class="login-txt">Login</h1> <div class="usrname-input"> <input type="text" placeholder="Username" class="username-area"> </div> <div class="passwd-input"> <input type="password" placeholder="Password" class="password-area"> </div> <div class="submit-button"> <input type="button" value="Submit"> </div> </section> </body> </html>
Plus CSS:
*{ margin: 0; padding: 0; color: black; font-family: "Fira Code"; } .login-txt{ font-size: 60px; position: relative; left: 1400px; top: 150px; } .usrname-txt{ font-size: 40pt; } .username-area{ width: 30%; height: 40px; } .password-area{ width: 30%; height: 40px; }
solution3
-1 2020-09-11 18:37:20
You have to select the input fields using a class or an id.
Here is a quick example:
input {
font-size: 3rem;
padding: 1rem;
margin-bottom: .5rem;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.