Formularios CSS
El aspecto de un formulario HTML se puede mejorar mucho con CSS:
Aplicar estilo a los campos de entrada
Utilice la widthpropiedad para determinar el ancho del campo de entrada:
Ejemplo
input
{
width: 100%;
}
El ejemplo anterior se aplica a todos los elementos <input>. Si solo desea diseñar un tipo de entrada específico, puede usar selectores de atributos:
input[type=text]- solo seleccionará campos de textoinput[type=password]- solo seleccionará campos de contraseñainput[type=number]- solo seleccionará campos numéricos- etc..
Entradas rellenadas
Use la paddingpropiedad para agregar espacio dentro del campo de texto.
Sugerencia: cuando tiene muchas entradas una tras otra, es posible que también desee agregar algunas marginpara agregar más espacio fuera de ellas:
Ejemplo
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Tenga en cuenta que hemos establecido la box-sizingpropiedad en
border-box. Esto asegura que el relleno y eventualmente los bordes estén incluidos en el ancho y alto total de los elementos.
Lea más sobre la box-sizingpropiedad en nuestro capítulo CSS Box Sizing .
Entradas bordeadas
Use la borderpropiedad para cambiar el tamaño y el color del borde, y use la border-radiuspropiedad para agregar esquinas redondeadas:
Ejemplo
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
Si solo desea un borde inferior, use la border-bottompropiedad:
Ejemplo
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
Entradas coloreadas
Use la background-colorpropiedad para agregar un color de fondo a la entrada y la colorpropiedad para cambiar el color del texto:
Ejemplo
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
Entradas enfocadas
De forma predeterminada, algunos navegadores agregarán un contorno azul alrededor de la entrada cuando se enfoca (hace clic en él). Puede eliminar este comportamiento agregando outline: none;a la entrada.
Use el :focusselector para hacer algo con el campo de entrada cuando se enfoca:
Ejemplo
input[type=text]:focus
{
background-color: lightblue;
}
Ejemplo
input[type=text]:focus
{
border: 3px solid #555;
}
Entrada con icono/imagen
Si desea un ícono dentro de la entrada, use la background-imagepropiedad y colóquelo con la background-positionpropiedad. También observe que agregamos un gran relleno a la izquierda para reservar el espacio del icono:
Ejemplo
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
Entrada de búsqueda animada
En este ejemplo, usamos la transitionpropiedad CSS para animar el ancho de la entrada de búsqueda cuando recibe el foco. Aprenderá más sobre la
transitionpropiedad más adelante, en nuestro capítulo Transiciones CSS .
Ejemplo
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Estilo de áreas de texto
Sugerencia: use la resizepropiedad para evitar que se cambie el tamaño de las áreas de texto (desactive el "capturador" en la esquina inferior derecha):
Ejemplo
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Diseño de menús de selección
Ejemplo
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Aplicar estilo a los botones de entrada
Ejemplo
input[type=button], input[type=submit], input[type=reset]
{
background-color: #4CAF50;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
Para obtener más información sobre cómo diseñar botones con CSS, lea nuestro Tutorial de botones CSS .
Formulario receptivo
Cambie el tamaño de la ventana del navegador para ver el efecto. Cuando la pantalla tenga menos de 600 px de ancho, haga que las dos columnas se apilen una encima de la otra en lugar de una al lado de la otra.
Avanzado: el siguiente ejemplo usa consultas de medios para crear un formulario receptivo. Aprenderá más sobre esto en un capítulo posterior.