Question

我正在尝试创建一个登录表单，到目前为止我的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>

我想用CSS设置它的样式。我该如何访问：

a）改变整体风格的整体形式

b）电子邮件地址标题和方框

c）按钮

我尝试过使用过。＃＆gt;但现在困惑自己。这可能是我犯的一个非常愚蠢的错误，但我无法理解......

Answer 1

以下是如何访问：

a）改变整体风格的整体形式 使用#loginform {/* CSS rules */}来解决表单容器的整体样式。由于除了表单之外没有其他元素，因此它就像您定位表单本身一样。

b）电子邮件地址标题和方框 使用#loginform label {/* CSS rules */}定位标签处的CSS规则，#email{}定位电子邮件输入框。您可以通过添加其ID（例如#email, #password {/* CSS rules */}）

，为其他项目重复使用此最后一条规则

c）按钮 使用input[type=submit] {/* CSS rules */}设置提交按钮的样式。

Answer 2

或者你可以使用＆＃34; class＆＃34;或＆＃34; id＆＃34;形式，标签和输入字段为他们提供个性化的风格。

Answer 3

由于您刚刚开始并且只是希望看到它正常工作，也许您可以更简单地将'id'属性附加到每个html元素，然后以这种方式在您的CSS中访问它们（针对具体细节）你想编辑，例如电子邮件标题，电子邮件输入，提交按钮）。

例如：

HTML

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

CSS

#submitBtn{ color:black   }

如果这不起作用，

1。）清除缓存

2.确保您的CSS文件实际包含在您的html中

3.确保附加到元素的页面上的每个“ID”都是唯一的

如果这不起作用，请使用您的开发工具并摆弄：在任何浏览器中点击（f12）

Answer 4

我解决了这个问题 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>

Answer 5

在输入周围包装标签是一种处理方式（技术上有效），另一种方法是使用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 */
 }

否则，将输入嵌套在标签内部不需要标签元素上的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;
}

Answer 6

首先，我建议您将代码结构更改为：

...    
<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]{
...
}

如何使用CSS设置html / form元素的样式？

6 个答案: