Como personalizar los campos de texto con CSS

Super User News 27 Diciembre 2022 Visto: 1319

Thank you for rating this article.

Si queremos quitar los bordes a los campos input de texto o personalizarlos al máximo, CSS nos ofrece muchas alternativas para modificar los estilos y que así podamos conseguir que su aspecto se adapte a todos los requerimientos visuales al crear una página web, como explicamos en este artículo.

Especificando estilos

Cuando asignamos un estilo determinado a un campo input, por ejemplo un borde redondeado o un color de fondo en concreto, automáticamente aparecen unos bordes que en ocasiones no se adaptan a lo que buscamos.

Veamos un ejemplo de campos de texto:

<p>
   <input type="text" class="redondeado" value="input con borde redondeado">
 </p>
 <p>
   <input type="text" class="confondo" value="input con color de fondo">
 </p>

Podemos asignarles unas clases, class de CSS con un determinado estilo:

.redondeado {
   border-radius: 5px;
 }
 .confondo {
   background-color: #def;
 }

Nuestro campo de texto con estos estilos se mostrará en algunos navegadores con un borde que no es de nuestro agrado.

Eliminar los bordes

Por defecto, en muchos navegadores los campos input type=»text» ya aparecen sin bordes, pero en muchas ocasiones nos puede convenir definir algunas reglas en las CSS para tener unos bordes acordes a nuestros requisitos de diseño. Esto lo podemos conseguir fácilmente con el atributo border de CSS.

Si por ejemplo tenemos este campo de texto:

<p>
   <input type="text" class="sinborde" value="input sin borde">
 </p>

Podemos eliminar los bordes utilizando los siguientes estilos:

.sinborde {
   border: 0;
 }

Haciendo esto eliminamos de una manera sencilla el borde del campo de texto. Ahora bien, es posible que el resultado transforme nuestro campo input en un texto simple en la página, perdiendo el aspecto de campo de texto.

Para que lo recupere, podemos colocarle estilos adicionales, como puede ser el color de fondo, que sin añadir un borde como tal, le devolverá el aspecto de campo de texto:

<p>
   <input type="text" class="sinbordefondo" value="input sin borde y con fondo">
 </p>

Podemos utilizar un CSS similar a este:

.sinbordefondo {
   background-color: #eee;
   border: 0;
 }

Eliminando el efecto resplandor

En ocasiones, si colocamos el foco del navegador sobre un campo de texto, aparece una especie de halo o efecto de resplandor a su alrededor que nos indica que el campo está activo. Este efecto puede resultar práctico cuando trabajamos con formularios que disponen de diferentes campos input, puesto que nos indica en qué parte del formulario nos encontramos. Pero no siempre es el efecto deseado y habrá que estudiar minuciosamente si concuerda con el aspecto que queremos darle a la hora de crear una página web. Podemos eliminar ese efecto fácilmente gracias al atributo outline.

Podemos verlo con el siguiente ejemplo de campo de texto:

<p>
   <input type="text" class="outlinenone" value="input sin borde y con fondo pero sin outline">
 </p>

Utilizaremos este CSS para eliminar el resplandor:

.outlinenone {
   outline: none;
   background-color: #dfe;
   border: 0;
 }

Evitando el efecto relieve de los bordes

Puede ocurrir que sí queremos que el input tenga borde, pero que éste no sea en relieve, como suele aparecer el borde predeterminado. Si queremos eliminar ese relieve, podemos hacerlo de la siguiente forma:

Partiendo de este campo de texto:

<p>
<input type="text" class="redondeadonorelieve" value="input con borde redondeado sin relieve">
</p>

Aplicamos los estilos, con los que forzaremos a que el grosor del borde sea siempre de 1 px y que su color sea uniforme:

.redondeadonorelieve {
border-radius: 5px;
border: 1px solid #39c;
}

De esta manera, hemos eliminado el relieve, al obligar al borde a que sea siempre de un grueso y color uniformes.

Para finalizar, aquí os dejamos un ejemplo con todos los campos de texto que hemos explicado en el artículo:

<!DOCTYPE html>
 <html lang="es">
 <head>
   <meta charset="UTF-8">
   <title>Campo input sin borde</title>
   <style>
   input {
     width: 250px;
     padding: 5px;
   }
   .redondeado {
     border-radius: 5px;
   }
   .confondo {
     background-color: #def;
   }
   .sinborde {
     border: 0;
   }
   .sinbordefondo {
     background-color: #eee;
     border: 0;
   }
   .outlinenone {
     outline: none;
     background-color: #dfe;
     border: 0;
   }
   .redondeadonorelieve {
     border-radius: 5px;
     border: 1px solid #39c;
   }
   </style>
 </head>
 <body>
   <p>
     <input type="text" value="input sin estilos">
   </p>
   <p>
     <input type="text" class="redondeado" value="input con borde redondeado">
   </p>
   <p>
     <input type="text" class="confondo" value="input con color de fondo">
   </p>
   <p>
     <input type="text" class="sinborde" value="input sin borde">
   </p>
   <p>
     <input type="text" class="sinbordefondo" value="input sin borde y con fondo">
   </p>
   <p>
     <input type="text" class="outlinenone" value="input sin borde y con fondo pero sin outline">
   </p>

  <p>
     <input type="text" class="redondeadonorelieve" value="input con borde redondeado sin relieve">
   </p>
 </body>
 </html>

Este es el resultado.