Cómo indicar el tipo de input en CSS
En CSS, es posible aplicar estilos específicos a los diferentes tipos de elementos <input> utilizando selectores de atributos. Esto permite personalizar la apariencia de cada tipo de campo de entrada, como texto, correo electrónico, contraseñas o botones, de forma eficiente.
Selectores para tipos de input en CSS
Para indicar el tipo de input en CSS, se usa el selector de atributo [type="valor"], donde "valor" corresponde al tipo de input definido en el HTML. Por ejemplo:
input[type="text"] {
border: 2px solid #3498db;
padding: 10px;
font-size: 14px;
}
input[type="email"] {
border: 2px solid #2ecc71;
background-color: #f9f9f9;
}
input[type="password"] {
border: 2px dashed #e74c3c;
}
Estos selectores aplican estilos específicos dependiendo del valor del atributo type del elemento <input>.
Ejemplos prácticos
Código HTML:
<form>
<input type="text" placeholder="Nombre">
<input type="email" placeholder="Correo">
<input type="password" placeholder="Contraseña">
<input type="submit" value="Enviar">
</form>Código CSS:
input[type="text"] {
color: #2c3e50;
}
input[type="email"] {
color: #16a085;
}
input[type="password"] {
color: #c0392b;
}
input[type="submit"] {
background-color: #2980b9;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}Resultado:
Cada tipo de campo tendrá un estilo diferenciado según su función, mejorando la experiencia del usuario.
Referencia oficial
Consulta más detalles sobre los selectores en la documentación oficial de MDN Web Docs.
Jorge García
Fullstack developer