如何使用CSS設計html/form元素的樣式？

我試圖創建一個日誌的形式和我的HTML到目前爲止是：如何使用CSS設計html/form元素的樣式？

<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>&nbsp;</span> 
     <input type="submit" value="Send" /> 
     </label> 
</form> 
</div> 
</div>

我想用CSS樣式它。如何訪問：

一）整體形式來改變整體風格

B）的電子郵件地址，標題和框

C）按鈕

我已經嘗試使用。＃>但現在困惑自己。這可能是一個非常愚蠢的錯誤，我正在做，但我不出來...

來源

2015-02-24 hturner

你在哪裏設置你的CSS？什麼是「。＃>」？ – 2015-02-24 16:26:43

@Drops - 允許標籤保存輸入...這是完全有效的HTML – 2015-02-24 16:31:49

@ShermanS對不起，代表我的不好澄清。我的CSS是在一個單獨的文件中，我的意思是我嘗試使用.x或#x或＃x.y或它們的組合來訪問元素，例如對於我的代碼中進一步表我使用表＃header-table td：first-child來訪問單個單元格和用於導航我已使用.navbar-default .navbar-nav> li> a ...等 – hturner 2015-02-24 16:32:24

我解決了這樣的 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>&nbsp;</span> 
     <input id="submit_button" type="submit" value="Send" /> 
     </label> <br /><br /><br /> 
</form> 
</div> 
</div>

來源

2015-02-24 16:44:37 Akilsree1

這裏是你如何可以訪問：

一）整體形式來改變整體風格 使用#loginform {/* CSS rules */}來解決表單容器的整體風格。由於除了表格之外沒有其他元素，因此它會像您將表格定位到自己一樣。

B）的電子郵件地址，標題和箱 使用#loginform label {/* CSS rules */}來定位標籤的CSS規則和#email{}爲目標的電子郵件輸入框。您可以重新用於其他項目這最後一條規則加入自己的ID（例如#email, #password {/* CSS rules */}）

C）按鈕 使用input[type=submit] {/* CSS rules */}樣式提交按鈕。

來源

2015-02-24 16:36:47 imelgrat

-1

首先，我建議你改變你的代碼的結構：

...  
<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>

然後答案是：

一）訪問的形式

form#login{ 
... 
}

B）電子郵件地址標題和框

label[for=email]{ 
} 
input[type=email]{ 
}

三）訪問按鈕

input[type=sbumit]{ 
... 
}

來源

2015-02-24 16:38:12

您不提供標籤和輸入內容之間的可訪問鏈接。可以將您的輸入封裝在標籤中，也可以將'for'屬性添加到標籤和'id's到輸入中。 – 2015-02-24 16:47:12

你是完全正確的，我已經改變了它。 – 2015-02-24 17:03:33

或替代你可以使用「類」或「ID」的形式，標籤和輸入框提供他們的個人風格。

來源

2015-02-24 16:39:04 aton1004

由於您剛剛開始，只是想看看它的工作原理，可能會更簡單的爲每個html元素附加一個'id'屬性，然後在你的css中以這種方式訪問它們（對於您要編輯的具體信息，例如電子郵件標題，電子郵件輸入，提交按鈕）。

例如：

HTML

<input id="submitBtn" type="submit" value="Send" />

CSS

#submitBtn{ color:black }

如果這行不通，

1）清除您緩存

2）使肯定喲烏爾CSS文件實際上是包含在HTML

3）確保連接到一個元素頁面上的每個「ID」是唯一

如果不工作，用你的開發工具和反覆折騰：命中（F12）在任何瀏覽器

來源

2015-02-24 16:41:40

在輸入周圍包裝標籤是一種做事情的方法（技術上有效），另一種方法是使用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>

將樣式，如：

否則，嵌套的標籤內部的輸入消除了對標籤元素的屬性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>&nbsp;</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; 
}

來源

2015-02-24 16:45:20

如何使用CSS設計html/form元素的樣式？

回答

相關問題