Entrada

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 52 de 76.

Desafío

Fácil

En esta lección mejoraremos la apariencia de los campos de entrada para que sean fáciles de usar.

Aplica estilos a los campos <input>. Sigue los pasos a continuación:

Haz que tengan un ancho de 100% para que se ajusten bien al formulario.
Añade relleno para que el texto del interior no toque los bordes.
Aplica un borde de color suave.
Haz que las esquinas sean redondeadas.
Añade un poco de margen entre los campos de entrada para que no parezcan demasiado juntos.
Usa box-sizing: border-box; para que el ancho incluya el relleno y los bordes.

Pruébalo tú mismo

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