如何使用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元素的样式？

回答

相关问题