El aspecto de un formulario HTML puede ser mejorado con CSS:
El estilo de los campos de entrada
Utilice la width propiedad para determinar la anchura del campo de entrada:
El ejemplo anterior se aplica a todos los <input> elementos. Si sólo desea el estilo de un tipo específico de entrada, puede utilizar selectores de atributos:
-
input[type=text]- sólo seleccionará los campos de texto -
input[type=password]- sólo seleccionará los campos de contraseña -
input[type=number]- sólo seleccionará los campos de números - etc ..
Entradas acolchados
Utilizar el padding la propiedad para agregar espacio dentro del campo de texto.
Consejo: Cuando se tienen muchas entradas después de la otra, es posible que también desee añadir un poco de margin , para añadir más espacio fuera de ellos:
Ejemplo
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
} Inténtalo tú mismo "  | Tenga en cuenta que nos hemos fijado el box-sizing a la propiedad border-box . Esto asegura que las fronteras de relleno y, eventualmente, se incluyen en la anchura total y la altura de los elementos. Lea más sobre el box-sizing propiedad en nuestra CSS3 caja de medición capítulo. |
|---|
Entradas confinado
Utilice la border propiedad para cambiar el tamaño y color del borde, y el uso de la border-radius propiedad para añadir esquinas redondeadas:
Si sólo desea un borde inferior, utilice el border-bottom propiedad:
Entradas de colores
Utilice el background-color propiedad para añadir un color de fondo a la entrada, y el color propiedad para cambiar el color del texto:
Entradas enfocadas
Por defecto, algunos navegadores añadir un contorno azul alrededor de la entrada cuando se pone foco (clic en). Puede eliminar este comportamiento mediante la adición de outline: none; a la entrada.
Utilice el :focus selector de hacer algo con el campo de entrada cuando se obtiene foco:
Entrada icono / imagen con
Si quieres un icono dentro de la entrada, utilice la background-image propiedad y posicionarlo con el background-position propiedad. También notamos que añadimos 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;
} Inténtalo tú mismo " Búsqueda de entrada de animación
En este ejemplo se utiliza el CSS3 transition propiedad para animar la anchura de la entrada de búsqueda cuando se pone el foco. Usted aprenderá más sobre la transition la propiedad más tarde, en nuestra CSS3 transiciones capítulo.
Ejemplo
input[type=text] {
-webkit-transition: width 0.4s
ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
} Inténtalo tú mismo " Styling Textareas
Consejo: Utilice el resize propiedad para evitar áreas de texto sea reducida (desactivar el "enganche" 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;
} Inténtalo tú mismo " Styling Seleccione Menús
Ejemplo
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
} Inténtalo tú mismo " El estilo de entrada Botones
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 */ Inténtalo tú mismo " Para obtener más información acerca de cómo el estilo botones con CSS, lea nuestra Tutorial CSS botones .