Uso de CSS en formularios

Veamos un primer ejemplo de lo que podemos hacer con CSS en un formulario.

Ejm

<!DOCTYPE html>
<html>
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}

input[type=submit]:hover {
background-color: #45a049;
}

div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
<body>

<h3>Usando CSS para dar estilo a formularios HTML</h3>

<div>
<form action="/action_page.php">
<label for="fname">Nombre</label>
<input type="text" id="fname" name="firstname" placeholder="Tu nombre..">

<label for="lname">Apellidos</label>
<input type="text" id="lname" name="lastname" placeholder="Tus apellidos..">

<label for="pais">País</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>

<input type="submit" value="Submit">
</form>
</div>

</body>
</html>

Dando estilo a las casillas

Utilizamos el atributo width para determinar el ancho de la casilla

Ejm

input {
  width: 100%;
}

Usamos la propiedad padding para añadir espacio entre el texto y la casilla

Ejm

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

Ten en cuenta que hemos establecido la propiedad box-sizing en border-box. Esto asegura que el relleno y eventualmente los bordes estén incluidos en el ancho y alto total de los elementos.

Inputs bordeados

Usa la propiedad border para cambiar el tamaño y el color del borde, y use la propiedad border-radius para agregar esquinas redondeadas:

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

Si solo deseas un borde inferior, usa la propiedad border-bottom:

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

Inputs coloreados

Usa la propiedad background-color para agregar un color de fondo a la entrada y la propiedad color para cambiar el color del texto:

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

Inputs enfocados

De forma predeterminada, algunos navegadores agregarán un contorno azul alrededor de la entrada cuando se enfoca (hace clic en él). Puedes eliminar este comportamiento agregando outline: none; a la entrada.

Usa el selector :focus para hacer algo con el campo de entrada cuando se enfoca.

Ejm

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}

input[type=text]:focus {
border: 3px solid #555;
}
</style>
</head>
<body>

<h2>Input fields with black border on :focus</h2>

<p>Here, the input field gets a black border color when it gets focus (clicked on).
 We have also added the CSS transition property to animate the border color
 (takes 0.5 seconds to change the color on focus):</p>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>

Inputs con imagen

Si deseas un ícono dentro de la entrada, usa la propiedad background-image y posiciónalo con la propiedad background-position. También observa que agregamos un gran relleno a la izquierda para reservar el espacio del icono:

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

Input de búsqueda animado

En este ejemplo, usamos la propiedad transition para animar el ancho de la entrada de búsqueda cuando recibe el foco.

Ejm

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px; 
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>

<h2>Animate width of search input</h2>

<form>
<input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

Dando estilo a Textarea

Sugerencia: usa la propiedad width para evitar que se cambie el tamaño de las áreas de texto (desactive el "capturador" en la esquina inferior derecha).

Ejm

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