GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Estilo en las Formas

Los selectores de atributos pueden ser útiles para las formas sin clase o ID:

input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}

input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}

Ver: Código 207.html

El aspecto de un formulario HTML se puede mejorar en gran medida con CSS.

El estilo de los campos de entrada

Uno de los aspectos más visuales a la hora de crear formularios es determinar el ancho del campo,
para ello utilizamos la propiedad width:

input {
width: 100%;
}

Ver: Código 208.html

El ejemplo anterior se aplica a todos los elementos <input>. 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.
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Relleno en los campos de entrada de texto

Usar la propiedad padding para añadir espacio dentro del campo de entrada de texto.
Consejo: Cuando se tienen muchas entradas, una después de la otra, es posible que también
desee añadir la propiedad margin, para añadir más espacio fuera de ellos:

input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}

Ver: Código 209.html

Tenga en cuenta que hemos establecido la propiedad box-sizing en border-box. Esto asegura que
los bordes y rellenos se incluyan en el ancho total y la altura de los elementos.

Entradas de texto confinadas

Utilice la propiedad border para cambiar el tamaño y color del borde, y el uso de la
propiedad border-radius para añadir esquinas redondeadas:

input[type=text] {
border: 2px solid red;
border-radius: 4px;
}

Ver: Código 210.html

Si sólo desea un borde inferior, utilice la propiedad border-bottom:

input[type=text] {
border: none;
border-bottom: 2px solid red;
}

Ver: Código 211.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Entradas de texto con colores de fondo

Utilice la propiedad background-color para añadir un color de fondo al campo de entrada, y la
propiedad color para cambiar el color del texto:

input[type=text] {
background-color: #3CBC8D;
color: white;
}

Ver: Código 212.html

Entradas de texto con foco

Por defecto, algunos navegadores añaden un borde azul alrededor del campo de entrada cuando
obtiene foco (o clic en). Puede eliminar este comportamiento mediante la adición de outline:
none; al campo de entrada.
Utilice el selector :focus para agregar algún efecto al campo de entrada cuando se hace click.

Color de fondo en el campo de entrada de datos al hacer click:

input[type=text]:focus {
background-color: lightblue;
}

Ver: Código 213.html

Color de borde en el campo de entrada de datos al hacer click:

input[type=text]:focus {
border: 3px solid #555;
}

Ver: Código 214.html

Entrada de texto con icono / imagen

Si quieres un icono dentro del campo de entrada, utilice la propiedad background-image y la
posicionamos con la propiedad background-position. También notamos que añadimos un gran
espacio de relleno a la izquierda para reservar el espacio que ocupará el icono o imagen:
input[type=text]:focus {
border: 3px solid #555;
}

Ver: Código 215.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Entrada de búsqueda con animación

En este ejemplo se utiliza la propiedad transition para animar la anchura de la entrada de
búsqueda cuando se pone el foco, más adelante abordaremos la propiedad transition.
input[type=text] {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}

Ver: Código 216.html

Estilo en campos área de texto

Podemos utilizar la propiedad resize para evitar que las áreas de texto sean reducidas (desactiva
el "activador" en la esquina inferior derecha):

textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}

Ver: Código 217.html

Estilo a combo o menú de selección

select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}

Ver: Código 218.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

El estilo en botones de entrada de datos

input[type=button], input[type=submit], input[type=reset] {

background-color: #21A1F0;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */

Ver: Código 219.html

Formulario responsivo o adaptable

Crearemos un formulario que cuando la pantalla sea inferior a 600px de ancho, se apilaran las dos
columnas una encima de la otra en lugar de una junto a la otra.

Ver: Código 220.html