Cuando trabajas con formularios HTML, saber cómo seleccionar inputs según su tipo con CSS te permite personalizar cada campo de manera independiente sin necesidad de añadir clases adicionales.
Gracias a los selectores de atributos de CSS, puedes aplicar estilos diferentes a campos de texto, correos electrónicos, contraseñas, botones, casillas de verificación o cualquier otro tipo de input de tu formulario.
Esta técnica resulta especialmente útil si trabajas con WordPress, formularios de contacto, WooCommerce o páginas de registro, ya que puedes modificar rápidamente la apariencia de determinados campos sin afectar al resto.
En este tutorial vas a aprender cómo utilizar estos selectores correctamente y descubrirás varios ejemplos que puedes adaptar directamente a tu página web. 🎨
Qué es un input en HTML 🧩
El elemento <input> de HTML se utiliza para crear controles interactivos que permiten al usuario introducir información dentro de un formulario.
Dependiendo del valor incluido en el atributo type, el navegador puede mostrar un campo de texto, una contraseña, un selector de fecha, una casilla de verificación o incluso un botón.
Por ejemplo, un campo destinado a introducir un nombre normalmente utilizará un input de tipo texto.
<input type="text" name="nombre">
En cambio, para solicitar una dirección de correo electrónico puedes utilizar un input de tipo email.
<input type="email" name="correo">
Puedes consultar todos los tipos disponibles en la documentación sobre el elemento input de MDN si necesitas conocer todas las posibilidades que ofrece HTML.
Cómo seleccionar un input por su tipo con CSS 🎯
CSS permite seleccionar elementos según los atributos incluidos dentro de su código HTML mediante los denominados selectores de atributos.
Para seleccionar únicamente los elementos <input> que tengan un determinado tipo debes utilizar la siguiente estructura.
input[type="text"] {
/* Tus estilos */
}
En este ejemplo, CSS seleccionará exclusivamente los inputs cuyo atributo type tenga el valor text.
Por ejemplo, puedes cambiar el borde y el fondo de todos los campos de texto utilizando este código.
input[type="text"] {
border: 1px solid #cccccc;
background: #f5f5f5;
}
Aunque existan diez tipos diferentes de campos dentro del formulario, estas propiedades solamente afectarán a los campos de texto.
Cómo seleccionar inputs de tipo email 📧
Los campos destinados a introducir direcciones de correo electrónico suelen utilizar el atributo type="email".
Puedes seleccionarlos fácilmente mediante este CSS.
input[type="email"] {
border: 2px solid #333333;
padding: 10px;
}
Este selector resulta especialmente práctico cuando quieres diferenciar visualmente determinados campos importantes dentro de un formulario de contacto o registro.
También puedes combinar varias propiedades CSS para personalizar completamente su apariencia.
input[type="email"] {
width: 100%;
padding: 12px;
border-radius: 5px;
box-sizing: border-box;
}
La propiedad box-sizing: border-box puede ser especialmente útil cuando utilizas campos con un ancho del 100 %, ya que evita determinados problemas relacionados con el padding y los bordes.
Cómo seleccionar inputs de tipo password 🔐
Los campos utilizados para introducir contraseñas normalmente tienen el atributo type="password".
Puedes seleccionarlos utilizando el siguiente código.
input[type="password"] {
background-color: #f7f7f7;
border: 1px solid #999999;
}
De esta manera puedes modificar únicamente los campos donde el usuario debe introducir una contraseña, dejando intactos el resto de elementos del formulario.
También podrías utilizar pseudoclases como :focus para cambiar su apariencia cuando el usuario hace clic dentro del campo.
input[type="password"]:focus {
border: 2px solid #333333;
outline: none;
}
Este tipo de pequeños cambios puede mejorar considerablemente la experiencia de usuario del formulario. ✨
Cómo seleccionar checkbox con CSS ☑️
Las casillas de verificación utilizan normalmente type="checkbox".
Para seleccionarlas puedes utilizar este código.
input[type="checkbox"] {
width: 18px;
height: 18px;
}
Este selector es muy útil para modificar el tamaño, margen o posición de los checkbox utilizados para aceptar condiciones legales, suscripciones o diferentes opciones.
Por ejemplo, puedes añadir espacio alrededor de todas las casillas de verificación mediante el siguiente código.
input[type="checkbox"] {
margin-right: 8px;
}
Si quieres realizar diseños más avanzados también puedes investigar propiedades como appearance, aunque debes comprobar siempre el comportamiento del resultado en distintos navegadores.
Cómo seleccionar botones de envío 🚀
Los botones tradicionales de envío pueden estar creados mediante un elemento input con el atributo type="submit".
Puedes seleccionarlos de esta manera.
input[type="submit"] {
padding: 12px 25px;
border: none;
cursor: pointer;
}
El selector afectará exclusivamente a los botones encargados de enviar el formulario.
También puedes añadir efectos cuando el usuario pasa el cursor sobre ellos.
input[type="submit"]:hover {
opacity: 0.8;
}
Añadir una transición permite conseguir un efecto visual ligeramente más agradable.
input[type="submit"] {
transition: opacity 0.3s ease;
}
Cómo seleccionar varios tipos de input a la vez 🔗
En muchas ocasiones seguramente quieras aplicar exactamente el mismo diseño a varios tipos de campos.
Puedes hacerlo separando diferentes selectores mediante comas.
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"] {
width: 100%;
padding: 12px;
border: 1px solid #cccccc;
}
Este código permite aplicar el mismo estilo a los campos de texto, correo electrónico, contraseña y teléfono.
Utilizar este sistema puede ayudarte a mantener tu hoja CSS más organizada y evitar repetir innecesariamente las mismas propiedades.
Tabla resumen de selectores de inputs 📋
La siguiente tabla reúne algunos de los tipos de input más utilizados y el selector CSS correspondiente.
| Tipo de campo | Selector CSS | Uso habitual |
|---|---|---|
| Texto | input[type="text"] | Nombre, dirección o texto corto |
input[type="email"] | Correo electrónico | |
| Contraseña | input[type="password"] | Contraseñas |
| Teléfono | input[type="tel"] | Número de teléfono |
| Número | input[type="number"] | Cantidades y valores numéricos |
| Checkbox | input[type="checkbox"] | Opciones y aceptación |
| Radio | input[type="radio"] | Elección entre varias opciones |
| Fecha | input[type="date"] | Selección de fechas |
| Archivo | input[type="file"] | Subida de archivos |
| Enviar | input[type="submit"] | Envío del formulario |
| Restablecer | input[type="reset"] | Restablecer campos |
| Buscar | input[type="search"] | Campos de búsqueda |
Cómo aplicar estos selectores paso a paso 🛠️
Si quieres personalizar tus formularios utilizando este sistema puedes seguir estos pasos.
- Inspecciona el formulario desde tu navegador para descubrir qué tipos de input utiliza cada campo.
- Localiza dentro del código HTML el atributo
typecorrespondiente al elemento que quieres modificar. - Construye el selector utilizando la estructura
input[type="valor"]. - Añade dentro de las llaves las propiedades CSS que quieras aplicar al campo.
- Guarda los cambios y actualiza la página para comprobar el resultado.
- Utiliza las herramientas para desarrolladores de tu navegador si alguna regla CSS está siendo sobrescrita por otros estilos.
- Comprueba finalmente el formulario tanto desde ordenador como desde dispositivos móviles para garantizar un buen diseño responsive.
Si utilizas WordPress, normalmente podrás añadir estos estilos desde el apartado destinado al CSS adicional de tu tema o desde las opciones específicas del constructor que estés utilizando.
Combinar el tipo de input con clases CSS 🧠
Los selectores por atributo también pueden combinarse con clases CSS para crear reglas mucho más específicas.
Imagina que solamente quieres modificar los inputs de texto incluidos dentro de un formulario con la clase .formulario-contacto.
Podrías utilizar este selector.
.formulario-contacto input[type="text"] {
border-radius: 10px;
}
De esta manera evitarás que otros campos de texto existentes en diferentes zonas de la página reciban esos mismos estilos.
También puedes combinar el selector con un identificador.
#registro input[type="email"] {
background-color: #fafafa;
}
Cuanto más concreta sea la selección, mayor control tendrás sobre los elementos afectados por tu CSS.
Seleccionar inputs mediante pseudoclases 👆
Una vez seleccionado el tipo de input también puedes añadir pseudoclases CSS para modificar su diseño según el estado del campo.
Por ejemplo, :focus permite detectar cuándo el usuario está interactuando con un determinado campo.
input[type="text"]:focus {
border-color: #000000;
outline: none;
}
También puedes utilizar :checked con elementos checkbox o radio.
input[type="checkbox"]:checked {
transform: scale(1.1);
}
La pseudoclase :disabled permite seleccionar campos desactivados.
input[type="text"]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
Puedes consultar más posibilidades en la referencia de pseudoclases CSS de MDN.
Errores frecuentes al seleccionar inputs por tipo ⚠️
Uno de los errores más habituales consiste en escribir incorrectamente el valor incluido dentro del atributo type.
Por ejemplo, input[type="correo"] no seleccionará un campo type="email" porque CSS necesita que el valor del atributo coincida.
Otro problema frecuente aparece cuando utilizas un selector demasiado general y terminas modificando campos que no pretendías cambiar.
Utilizar selectores específicos como .formulario input[type="text"] puede ayudarte a limitar el alcance de tus reglas CSS.
También debes tener presente que determinadas propiedades aplicadas sobre checkbox, radio, fechas o archivos pueden comportarse de forma diferente dependiendo del navegador y sistema operativo utilizado.
Conclusión ✅
Aprender cómo seleccionar inputs según su tipo con CSS te proporciona una forma sencilla y potente de controlar el diseño de tus formularios.
La estructura input[type="valor"] permite identificar prácticamente cualquier tipo de campo sin necesidad de añadir clases CSS adicionales al HTML.
Puedes utilizarla para seleccionar campos de texto, email, teléfono, contraseña, checkbox, radio, fechas, archivos o botones de envío.
Además, combinando estos selectores con clases, identificadores y pseudoclases puedes crear formularios mucho más precisos, atractivos y fáciles de mantener.
Si trabajas habitualmente diseñando páginas web o modificando formularios de WordPress, dominar los selectores de atributos CSS seguramente te ahorrará una cantidad considerable de código y tiempo. 🚀
