En este tutorial aprenderás cómo crear un input desplegable en HTML y CSS desde cero. Descubre cómo usar las etiquetas <select> y <option> para añadir un toque interactivo y profesional a tus formularios web.
Los inputs desplegables son elementos fundamentales para formularios web. Permiten seleccionar opciones de manera ordenada y eficiente.
En este tutorial, creado por AsensiDev, aprenderás a diseñar un menú desplegable básico, complementándolo con estilos CSS para un aspecto atractivo.
Tambien lee:
Requisitos previos
Antes de comenzar, asegúrate de tener lo siguiente:
- Visual Studio Code instalado.
- La extensión Live Server configurada para previsualizar cambios en tiempo real.
Estructura del proyecto de input desplegable
- Archivos necesarios:
- index.html: Contendrá la estructura del input desplegable.
- styles.css: Agregará estilo y diseño al input.
- Configuración inicial:
- Crea ambos archivos en una carpeta del proyecto.
- Usa la estructura básica de HTML con la etiqueta
<!DOCTYPE html>y enlaza tu archivo CSS en la sección<head>.
Código paso a paso
HTML: Creando la estructura básica
Dentro de index.html, utiliza las etiquetas <select> y <option> para construir el input desplegable:
htmlCopiarEditar<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Desplegable</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="dropdown">
<label for="options">Selecciona una opción:</label>
<select id="options" name="options">
<option value="opcion1">Opción 1</option>
<option value="opcion2">Opción 2</option>
<option value="opcion3">Opción 3</option>
<option value="opcion4">Opción 4</option>
</select>
</div>
</body>
</html>
CSS: Estilizando el input desplegable
Añade estilos a tu input desplegable en styles.css:
cssCopiarEditarbody {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.dropdown {
display: flex;
flex-direction: column;
align-items: flex-start;
}
label {
margin-bottom: 8px;
font-size: 16px;
}
select {
padding: 8px 12px;
font-size: 16px;
border: 2px solid #007bff;
border-radius: 4px;
appearance: none;
background-color: #fff;
background-image: url('data:image/svg+xml;base64,...'); /* Icono de flecha */
background-repeat: no-repeat;
background-position: right 10px center;
cursor: pointer;
transition: border-color 0.3s ease;
}
select:focus {
border-color: #0056b3;
outline: none;
}
Mira el tutorial completo
Este contenido forma parte del tutorial creado por AsensiDev. Si prefieres seguir el proceso en detalle con una guía en video, aquí tienes el enlace: 👇
En este tutorial aprendiste a crear un input desplegable funcional y estético con HTML y CSS. Este diseño es ideal para formularios interactivos en tus proyectos web. Sigue explorando más tutoriales de AsensiDev para mejorar tus habilidades de desarrollo.
