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;
}