输入框

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 52 课，共 76 课。

挑战

简单

在本课中，我们将改进输入框的外观，让它们更方便使用。

为 <input> 字段添加样式。按以下步骤操作：

将宽度设为 100%，让输入框与表单适配得更好。
添加内边距，避免文字紧贴边缘。
应用柔和颜色的边框。
将边角设为圆角。
在输入框之间添加一些外边距，避免它们看起来太过紧凑。
使用 box-sizing: border-box;，这样宽度就会包含内边距和边框。

亲手试试

<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form class="login-form">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
</body>
</html>