Formularios CSS

Tabla de contenido

    Mostrar tabla de contenidos

El aspecto de un formulario HTML se puede mejorar enormemente con CSS:

Pruébelo usted mismo →

<!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>Using CSS to style an HTML Form</h3>

<div>
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</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>

Aplicar estilos a los campos de entrada

Utilice la propiedad width para determinar el ancho del campo de entrada:

Ejemplo

input
{
  width: 100%;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
input {
  width: 100%;
}
</style>
</head>
<body>

<h2>A full-width input field</h2>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
</form>

</body>
</html>

El ejemplo anterior se aplica a todos los elementos <input>. Si solo quieres diseñar un tipo de entrada específico, puede utilizar selectores de atributos:

input[type=text]

- solo seleccionará campos de texto

input[type=password]

- solo seleccionará campos de contraseña

input[type=number]

- solo seleccionará campos numéricos

etc..

Entradas acolchadas

Utilice la propiedad padding para agregar espacio dentro del campo de texto.

Consejo: Cuando tienes muchas entradas una tras otra, es posible que También quiero agregar algo de margen, para agregar más espacio fuera de ellos:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
</style>
</head>
<body>

<h2>Padded input fields</h2>

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

</body>
</html>

Tenga en cuenta que hemos establecido la propiedad box-sizing en cuadro de borde. 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 propiedad box-sizing en nuestro capítulo CSS Box Sizing.

Entradas bordeadas

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid red;
  border-radius: 4px;
}
</style>
</head>
<body>

<h2>Input fields with borders</h2>

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

</body>
</html>

Si solo desea un borde inferior, use la propiedad border-bottom:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid red;
}
</style>
</head>
<body>

<h2>Input fields with bottom border</h2>

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

</body>
</html>

Entradas de colores

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #3CBC8D;
  color: white;
}
</style>
</head>
<body>

<h2>Input fields with color</h2>

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

Entradas enfocadas

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

Utilice el selector :focus para hacer algo con el campo de entrada cuando reciba el foco:

Ejemplo

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

Pruébelo usted mismo →

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

input[type=text]:focus {
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Input fields with color on :focus</h2>

<p>Here, the input field gets a color when it gets focus (clicked on):</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>

Ejemplo

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

Pruébelo usted mismo →

<!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>

Entrada con icono/imagen

Si desea un ícono dentro de la entrada, use la propiedad imagen de fondo y colóquelo con la posición de fondo propiedad. Observe también que agregamos un gran relleno izquierdo para reservar el espacio del ícono:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  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;
}
</style>
</head>
<body>

<h2>Input field with an icon inside</h2>

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

</body>
</html>

Entrada de búsqueda animada

En este ejemplo utilizamos la propiedad CSS transition para animar el ancho de la entrada de búsqueda cuando recibe el foco. Aprenderá más sobre la propiedad transición 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%;
}

Pruébelo usted mismo →

<!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>

Estilo de áreas de texto

Consejo: Utilice la propiedad resize para evitar que se cambie el tamaño de las áreas de texto (deshabilite el "grabber" 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;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}
</style>
</head>
<body>

<h2>Styling textarea</h2>

<p><strong>Tip:</strong> Use the resize property to prevent textareas from being resized (disable the "grabber" in the bottom right corner):</p>

<form>
  Some text...&lt;/textarea>
</form>

</body>
</html>

Estilo de menús de selección

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Styling a select menu</h2>

<form>
  <select id="country" name="country">
  <option value="au">Australia</option>
  <option value="ca">Canada</option>
  <option value="usa">USA</option>
  </select>
</form>

</body>
</html>

Botones de entrada de estilo

Ejemplo

input[type=button], input[type=submit], input[type=reset]
{
  background-color: #04AA6D;
  border: 
none;
  color: white;
  padding: 
16px 32px;
  text-decoration: none;
  
margin: 4px 2px;
  cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=button], input[type=submit], input[type=reset] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>Styling form buttons</h2>

<input type="button" value="Button">
<input type="reset" value="Reset">
<input type="submit" value="Submit">

</body>
</html>

Para obtener más información sobre cómo diseñar botones con CSS, lea nuestro Tutorial de botones CSS.

Formulario responsivo

Cambie el tamaño de la ventana del navegador para ver el efecto. Cuando la pantalla tenga menos de 600 píxeles 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 utiliza consultas de medios para crear un formulario responsivo. Aprenderá más sobre esto en un capítulo posterior.

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

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

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
</style>
</head>
<body>

<h2>Responsive Form</h2>
<p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.</p>

<div class="container">
  <form action="/action_page.php">
  <div class="row">
    <div class="col-25">
      <label for="fname">First Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="fname" name="firstname" placeholder="Your name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="lname">Last Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="country">Country</label>
    </div>
    <div class="col-75">
      <select id="country" name="country">
        <option value="australia">Australia</option>
        <option value="canada">Canada</option>
        <option value="usa">USA</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="subject">Subject</label>
    </div>
    <div class="col-75">
      &lt;textarea id="subject" name="subject" placeholder="Write something.." style="height:200px">&lt;/textarea>
    </div>
  </div>
  <br>
  <div class="row">
    <input type="submit" value="Submit">
  </div>
  </form>
</div>

</body>
</html>

Formulario alineado

Un ejemplo de cómo diseñar etiquetas junto con entradas para crear un formulario alineado horizontalmente:

Ejemplo

select
{
    color: green;
    display: 
inline-block;
    width: 130px;
    
text-align: right;
    padding-right: 15px; 
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
.label {
  color: green;
  display: inline-block;
  width: 130px;
  text-align: right;
  padding-right: 15px; 
}

input[type=text] {
  width: 200px;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
</style>
</head>
<body>

<p>Aligned form:</p>

<form>
  <div>
    <label for="fname10" class="label">First Name</label>
    <input type="text" id="fname10" name="firstname">
  </div>

  <div>
    <label for="mname" class="label">Middle Name</label>
    <input type="text" id="mname" name="lastname">
  </div>

  <div>
    <label for="lname10" class="label">Last Name</label>
    <input type="text" id="lname10" name="lastname">
  </div>
</form>

</body>
</html>