Input
Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 52 de 76.
Desafío
FácilEn esta lección mejoraremos la apariencia de los campos de entrada para que sean fáciles de usar.
Estiliza los campos <input>. Sigue los pasos a continuación:
- Hazlos de un 100% de ancho para que se ajusten bien al formulario.
- Añade padding para que el texto interior no toque los bordes.
- Aplica un border con un color suave.
- Haz las esquinas redondeadas.
- Añade algo de margin entre los campos de entrada para que no se vean 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>
Todas las lecciones de Styling with CSS
4Fundamentos del texto
Color de textoFamilia de fuentesTamaño de fuenteGrosor de fuenteAlineación de textoDecoración de textoDesafío de repaso #1Desafío de repaso #27Modelo de caja - Parte 1
¿Qué es el modelo de caja?PaddingMárgenesBordesAncho y altoDesafío de repaso
3Selectores básicos
Introducción a los selectoresSelector de tipoSelector de claseSelector de IDSelectores de grupoSelector universalDesafío de selección9Flex Box
¿Qué es Flex Box?Flex DirectionJustify ContentAlign ItemsEl centrado perfectoDesafío de Flex Box12Fundamentos de Diseño Responsivo
¿Qué es el Diseño Responsivo?Etiqueta Meta ViewportDiseños FluidosUnidades de ViewportFundamentos de Media QueriesImágenes Flexibles