Input

Part of the Styling with CSS section of Coddy's HTML journey. Lesson 52 of 76.

Challenge

Easy

In this lesson we will improve the appearance of the input fields to make them user-friendly.

Style the <input> fields. Follow the steps below:

Make them 100% wide so they fit the form nicely.
Add padding so text inside doesn’t touch the edges.
Apply a border with a soft color.
Make the corners rounded.
Add some margin between the input fields so they don’t look too close together.
Use box-sizing: border-box; so the width includes padding and borders.

Try it yourself

<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>