如何使用CSS設置html / form元素的樣式？
[英]How can I style html/form elements using CSS?
問題描述
我正在嘗試創建登錄表單，到目前為止，我的html是：
<body id="login">
<div id="wrapper">
<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">
<h1>Login Form</h1>
<label>
<span>Email Address:</span>
<input id="email" type="text" name="email" placeholder="Enter a valid email address" />
</label>
<label>
<span>Password:</span>
<input id="password" type="password" name="password" placeholder="Password" />
</label>
<label>
<span> </span>
<input type="submit" value="Send" />
</label>
</form>
</div>
</div>
我想使用CSS設置樣式。 如何訪問：
a）整體形式改變整體風格
b）電子郵件地址標題和框
c）按鈕
我嘗試使用。 ＃>但現在讓我感到困惑。 這可能是我犯的一個非常愚蠢的錯誤，但我無法弄清楚...
6 個解決方案
解決方案1
2 2015-02-24 16:36:47
您可以通過以下方式訪問：
a）更改整體樣式的整體表單使用#loginform {/* CSS rules */}解決表單容器的整體樣式。 由於除表單外沒有其他元素，因此它將像您將表單本身作為目標一樣工作。
b）電子郵件地址標題和框使用#loginform label {/* CSS rules */}定位標簽處的CSS規則，並使用#email{}定位電子郵件輸入框。 您可以通過添加其他項目的ID（例如#email, #password {/* CSS rules */} ）對其他項目重復使用最后一條規則
c）按鈕使用input[type=submit] {/* CSS rules */}設置提交按鈕的樣式。
解決方案2
1 2015-02-24 16:39:04
或者，您可以在表單，標簽和輸入字段中使用“類”或“ id”來提供個性化樣式。
解決方案3
1 2015-02-24 16:41:40
由於您只是剛開始，只是想看看它能正常工作，因此，將“ id”屬性附加到每個html元素，然后以這種方式在css中訪問它們（對於您要的具體細節，可能會更簡單）編輯，例如電子郵件標題，電子郵件輸入，提交按鈕）。
例如：
HTML
<input id="submitBtn" type="submit" value="Send" />
CSS
#submitBtn{ color:black }
如果這樣不起作用，
1.）清除緩存
2.）確保您的css文件實際上包含在您的html中
3.）確保頁面上附加到元素的每個“ ID”都是唯一的
如果不起作用，請使用您的開發工具並弄亂：在任何瀏覽器中均按（f12）
解決方案4
1 已采納 2015-02-24 16:44:37
我這樣解決了CSS
<style type="text/css">
form{
text-align: center; /* To align the form center */
background-color: orange; /* sets the background-color to orange */
}
#password{ /* If you use class attribute, use .password{} */
/* to modify this section*/
}
#email{
width: 200px; /* to size the email bar*/
}
#submit_button{
color: #fff; /* Text Color*/
background-color: #5cb85c; /* Background color green*/
border-color: #4cae4c; /* border color light green*/
}
</style>
HTML
<div id="wrapper">
<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">
<h1>Login Form</h1>
<label>
<span>Email Address:</span>
<input id="email" type="text" name="email" placeholder="Enter a valid email address" />
</label>
<br /><br /><br />
<label>
<span>Password:</span>
<input id="password" type="password" name="password" placeholder="Password" />
</label>
<br /><br /><br />
<label>
<span> </span>
<input id="submit_button" type="submit" value="Send" />
</label> <br /><br /><br />
</form>
</div>
</div>
解決方案5
1 2015-02-24 16:45:20
將標簽包裝在輸入周圍是一種處理方式（從技術上講是有效的），另一種方式是使用for屬性。 后者通常被某些人接受，因為它避免了額外的跨度。
<form id="loginform" action="" method="post">
<div class="input">
<label for="username">Username</label>
<input type="text" name="username" id="username" />
</div>
<div class="input">
<label for="password">Passowrd</label>
<input type="password" name="password" id="password" />
</div>
<input type="submit" value="Log On" class="btn" />
</form>
然后將其樣式設置為：
.input > label:after /* To place style/content after the label */
{
content: ':';
}
.input > label /* To target the label */
{
display:block; /* Puts the label above the input, just an example */
}
.input > input /* The input. */
{
background: yellow; /* for instance */
}
.input /* The whole input and label pair */
{
margin-bottom: 3px; /* Add space bellow each input, or whatever */
}
否則，將輸入嵌套在標簽內將不再需要在label元素上使用for屬性，而在輸入元素上則需要id 。 因此，如果我們使用您的HTML：
<body id="login">
<div id="wrapper">
<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">
<h1>Login Form</h1>
<label>
<span>Email Address:</span>
<input id="email" type="text" name="email" placeholder="Enter a valid email address" />
</label>
<label>
<span>Password:</span>
<input id="password" type="password" name="password" placeholder="Password" />
</label>
<label>
<span> </span>
<input type="submit" value="Send" />
</label>
</form>
</div>
</div>
我們可以這樣設置樣式：
#login > label
{
/* Style for input pair */
margin-bottom: 3px;
}
#login label > span
{
/* Style for the label text */
display:block;
}
#login > label > input
{
/* Style for the input itself. */
background: yellow;
}
解決方案6
-1 2015-02-24 16:38:12
首先，我建議您將代碼結構更改為：
...
<form id="login" name="login" action="" method="post" accept-charset="utf-8" class="smart-green">
<h1>Login Form</h1>
<label for="email">Email Address:</label>
<input id="email" type="text" name="email" placeholder="Enter a valid email address" />
<label for="password">Password:</label>
<input id="password" type="password" name="password" placeholder="Password" />
<input type="submit" value="Send" />
</form>
然后答案是：
a）訪問表格
form#login{
...
}
b）電子郵件地址標題和框
label[for=email]{
}
input[type=email]{
}
c）訪問按鈕
input[type=sbumit]{
...
}
如何使用 JS 將樣式修改為 HTML 元素（使用 CSS 外部樣式）？
[英]How to modify style to HTML elements (styled externally with CSS) using JS?
我如何使用 HTML、CSS 和 JavaScript 創建此 FORM 功能
[英]How can i create this FORM functionality using HTML, CSS & JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.