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>