如何使用 CSS 使文本輸入框變大？
[英]How do I make text input box bigger with CSS?
問題描述
我已經學習 Web 開發大約一個月了，最近我陷入了困境。 我正在制作一個簡單的登錄頁面作為練習，但是當我嘗試使輸入字段變大時，它沒有做任何事情。 這是我的 HTML 和 CSS 代碼：
<!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;
}
誰能幫我？ 我不知道我有沒有做錯什么。
3 個解決方案
解決方案1
0 2020-09-11 18:43:08
你使用了錯誤的類選擇器，試試這個 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;
}
解決方案2
0 已采納 2020-09-11 18:46:53
您的問題是您只更改了不同元素的大小，而不是 textarea。 您可以通過向兩個 textarea 添加一個類而不是更改它們的寬度和高度來糾正它。
像這樣：
<!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>
加上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; }
解決方案3
-1 2020-09-11 18:37:20
您必須使用類或 id 選擇輸入字段。
這是一個快速示例：
input {
font-size: 3rem;
padding: 1rem;
margin-bottom: .5rem;
}
頁面加載后如何使文本輸入框光標自動閃爍？
[英]How do I make the text input box cursor blink automatically when the page loads?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.