如何设置窗体操作的样式

Question

下面的代码怎么会是css，我是初学者，似乎不能 让我的头脑围绕它

        <div id="page-container">
         <?php include_once("home_start.php"); ?> 
         <h1>Login</h1> 
        <form action='login process.php' method='POST'> 
         Username: <input type='text' name='username'><br /> 
         Password: <input type='password' name='password'><br /> 
         <input type='submit' name='submit' value='Login'> 
         <input name='reset' type='reset' value='Reset'> 
        </form> 
         <h4><a href='register.php'>Register</a></h4> 
        <?php include_once("home_end.php"); ?> 
        </div>

Answer 1

添加一个类/ID来定位这个特定的表单（或者如果你想定位特定的位，你已经使用过的任何标签），然后有以下HTML，例如：

<form id="red-form" action='login process.php' method='POST'>
    Username: <input type='text' name='username'><br /> 
    Password: <input type='password' name='password'><br /> 
    <input type='submit' name='submit' value='Login'> 
    <input name='reset' type='reset' value='Reset'> 
</form>

然后使用 CSS 来设置该 ID/类的样式，例如：

#red-form {
    background-color:red;
}

或者你可以只针对所有表单，然后你不需要添加一个类/ID，你的CSS会像：

form {
        background-color:red;
    }

或者只定位输入：

input {
   background-color:blue; 
}

演示

世界真的是你的牡蛎。有关如何设置表单样式的一些想法，请参阅此处。

Answer 2

您可以按如下方式定位各个输入字段：

input[type=text] { color:red; }