インプット

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 52/76。

チャレンジ

簡単

このレッスンでは、入力フィールドの外観を改善して、ユーザーフレンドリーにしていきます。

<input> フィールドをスタイリングします。以下の手順に従ってください：

フォームにうまく収まるように、幅を 100% wide にします。
中のテキストが端に触れないように、padding を追加します。
ソフトな色の border を適用します。
角を丸くします。
入力フィールド同士が近すぎないように、margin を追加します。
幅にパディングとボーダーが含まれるように、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>