CSS Input: Personaliza los campos de texto al máximo

4min

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 y poder llegar a ser un profesional en CSS.

Índice

¿Qué es CSS?

El CSS (Cascading Style Sheets) es un lenguaje que controla el estilo y el diseño de las páginas web. Se encarga de mejorar la apariencia de manera rápida y uniforme mediante colores, fuentes, bordes, tamaños o márgenes, para que estos coincidan con el estilo de tu web además de mejorar la experiencia para tus usuarios.

Entre otras modificaciones, con CSS vas a poder:

  • Cambiar el color del fondo de tu página web
  • Cambiar la tipografía de un texto
  • Definir el ancho y el alto de un elemento
  • Añadir diferentes efectos especiales

¿Qué relación tiene el CSS con el HTML?

Tanto HTML como CSS son dos lenguajes utilizados para el desarrollo de un sitio web. Mientras que HTML sirve para crear la estructura de una página web y describir el contenido que hay, además de definir los elementos que se van a mostrar (encabezado, cuerpo o pie de página); CSS sirve para describir cómo se mostrará dicho contenido y dar estilo a esos elementos HTML, definiendo así su aspecto y distintas disposiciones como color, tamaño o fuente.

¿Cómo se utiliza el CSS en una página web?

Para poder utilizar CSS en tu página web, utilizarás una serie de reglas dentro de tu código HTML. Puedes incorporar estas reglas a elementos específicos (como títulos, párrafos o imágenes) de diferentes formas:

  • Interna, añadiéndolas directamente en tu página web.
  • Externa, añadiéndolas en un archivos aparte.
  • Mediante etiquetas individuales.

Propiedades y valores de CSS

Una propiedad CSS es un atributo que se puede añadir a un elemento HTML para así modificar su aspecto o disposición; mientras que los valores CSS se asignan a estas propiedades y pueden ser de muchos tipos, como colores, fuentes, tamaños, etc.

Las propiedades se definen con un nombre (por ejemplo, «color») seguido de un valor (siguiendo con el ejemplo, «red»). De esta forma, si aplicamos este código CSS, podríamos modificar el color del texto a rojo.

Especificando estilos de CSS Input

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.[banneroferta product=1]

Cómo eliminar los bordes con CSS Input

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

Cómo eliminar el efecto resplandor con CSS Input

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

Cómo evitar el efecto relieve de los bordes con CSS Input

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.

Cómo cambiar el color de fondo con CSS Input

Para cambiar el color del fondo en CSS, utilizaremos la propiedad «background-color».

La selección del color puede realizarse de cuatro maneras diferentes:

  • Con código hexadecimal: es una cadena de seis caracteres que comienza con “#”, representando la cantidad de rojo en sus dos primeros caracteres; la cantidad de verde en los dos siguientes y la cantidad de azul en los dos últimos. Por ejemplo, el color verde sería #00FF00.
  • Con valores RGB: son tres números entre 0 y 255, representando la cantidad de rojo, verde y azul en el color. Por ejemplo, el color verde sería RGB (0, 255, 0).
  • Con valores HSL: son tres números entre 0 y 1, representando la cantidad de matiz, saturación y luminosidad del color. Por ejemplo, el color verde sería HSL (120, 100, 50).
  • Con los nombres de los colores: también se admite una lista de nombres de colores para representar estos mismos. Por ejemplo, el color verde sería “green”.

De esta manera, para cambiar el color de fondo de toda la página web a verde, podríamos hacerlo de la siguiente manera (la primera, la rgb; y la segunda, en hexadecimal):

body{ 
   background-color: green; 
}
body { 
   background-color: #00FF00; 
}

Por otro lado, si quisiéramos que el cambio sólo se aplique a un elemento concreto, podemos utilizar la propiedad «background-color» en el selector de dicho elemento. También, si quisiéramos cambiar el color de fondo para todos los elementos de texto de la misma clase («my-class») a verde:

.my-class { 
   background-color: #00FF00; 
}

Cómo añadir una imagen de fondo con CSS Input

Además de colores, también podemos añadir una imagen de fondo con CSS utilizando la propiedad «background-image», que acepta la URL de la imagen que queremos utilizar.

Así, para añadir la imagen «image.png» como fondo, utilizaremos el siguiente código CSS:

body {
    background-image: url(imagen.png);
}

NOTA: Hay que tener en cuenta que si la imagen no es lo suficientemente grande, se adaptará al tamaño del sitio web en forma de mosaico para cubrir el fondo en su totalidad.

Si lo que queremos es añadir la imagen «image.png» como fondo para los elementos de texto, lo haremos así:

html {
    background-image: url(imagen.png);
}

También podemos añadir la imagen a cualquier elemento, simplemente utilizando la propiedad «background-image» en el selector del elemento. O utilizar la propiedad «background-repeat» para controlar cómo se va a repetir la imagen de fondo:

  • «repeat» para repetirse en todas las direcciones.
  • «repeat-x» para repetirse horizontalmente únicamente.
  • «repeat-y» para repetirse verticalmente únicamente.
  • «no-repeat» para no repetirse.

Por ejemplo, para añadir una imagen de fondo, pero sin que ésta se repita:

html {
    background-image: url(imagen.png);
    background-repeat: no repeat;
}

Cómo cambiar el color del texto con CSS Input

Para cambiar el color del texto en CSS, utilizaremos la propiedad «color». Y al igual que ocurría con el fondo, para cambiar el color del texto también encontramos cuatro maneras distintas de hacerlo: con código hexadecimal, valores RGB, valores HSL o usando el nombre del color.

Así, si quisiéramos modificar el color para todos los elementos de texto de la página web a color verde, podríamos hacerlo de estas dos formas: indicando el nombre del color (en inglés) y con su código hexadecimal.

html { 
  color: green; 
}

html { 
  color: #00FF00; 
}

Más, si lo que queremos es cambiar el color de un elemento específico, utilizaremos la propiedad «color» en el selector del elemento. Mientras que para cambiar el color para todos los elementos de texto de una misma clase («my-class») a verde:

.my-class { 
  color: #00FF00; 
}

Cómo cambiar el tamaño de la fuente con CSS Input

Ahora, para cambiar el tamaño de la fuente en CSS, utilizaremos la propiedad «font-size», la cual especifica la dimensión en píxeles (px) de la letra.

En el siguiente ejemplo, vamos a cambiar el tamaño del texto a 16 píxeles para todos los elementos de texto de la página web:

html {
  font-size: 16px;
}

Si quisiéramos ajustar el tamaño de la fuente para un elemento concreto, podemos utilizar la propiedad «font-size» en el selector de ese elemento. También podemos ajustar el tamaño para todos los elementos de texto de una clase (por ejemplo, «my-class»).

.my-class {
  font-size: 16px;
}

Además, también podremos usar unidades relativas (como “em” o “rem”) para ajustar el tamaño en relación a la fuente base del elemento padre o de la página.

html {
  font-size: 16px;
}
* {
  font-size: 1.2em; /* Aumenta un 20% en relación al tamaño de fuente del elemento padre */
}

Recuerda que puedes aplicar esta propiedad a diferentes elementos HTML, como párrafos, encabezados, enlaces, etc., para controlar el tamaño de la fuente en toda tu página web.

Cómo cambiar la tipografía con CSS Input

Para poder cambiar la tipografía con CSS, usaremos la propiedad «font-family».

Por ejemplo, si quisiéramos cambiar la tipografía para todos los elementos de texto de la página web a Helvetica:

html {
  font-family: Helvetica;
}

También podemos añadir una segunda tipografía, como Arial, en el caso de que la primera no estuviera disponible:

html {
  font-family: Helvetica, Arial;
}

En cambio, si quisiéramos cambiar la tipografía para un elemento específico, utilizaremos la propiedad «font-family» en el selector del elemento. De nuevo, podemos modificar la tipografía para una misma clase de elementos («my-class»).

.my-class {
  font-family: Helvetica;
}

Cómo cambiar el tamaño de un elemento con CSS Input

Para cambiar el tamaño de un elemento en CSS, utilizaremos dos propiedades: «width» para modificar el ancho y «height» para modificar la altura.

Por ejemplo, si quisiéramos cambiar el tamaño de un elemento a 200 píxeles de ancho y 100 píxeles de alto:

.my-element {
   width: 200px;
   height: 100px;
}

Cómo cambiar la posición de un elemento con CSS Input

Para cambiar la posición de un elemento en CSS, utilizaremos la propiedad «position».

Hay diferentes valores para la propiedad «position»:

  • «static» para posicionarse naturalmente en el documento.
  • «relative» para posicionarse en relación a su posición original.
  • «absolute» para posicionarse en relación al elemento padre o al marco de la ventana.
  • «fixed» para posicionarse en relación al marco de la venta, sin desplazarse con el resto del contenido.

Incluso podemos utilizar las propiedades «top», «bottom», «left» y «right» para indicar la posición que queremos para ese elemento dentro de la página web.

De esta manera, para cambiar la posición de un elemento a «relative», además de moverlo 20 píxeles a la derecha y 15 píxeles hacia abajo:

.my-element {
   position: relative;
   right: 20 px;
   bottom: 15px;
}

Cómo añadir efectos especiales con CSS Input

Animaciones CSS

Gracias a las animaciones podemos añadir movimiento a nuestros elementos HTML. Para crear estas animaciones, usaremos la propiedad «animation», la cual nos permitirá definir su duración, el número de repeticiones y otras opciones.

  • «animation-name» es el nombre de la animación.
  • «animation-duration» es la duración en segundos.
  • «animation-iteration-count» es el número de veces que se repetirá.

Con el siguiente código CSS, crearemos una animación de desplazamiento izquierda-derecha con una duración de 2 segundos y que se mostrará en bucle:

animation: slide 2 s infinite;

Transiciones

Por otro lado, las transiciones CSS son una manera de suavizar los cambios entre los diferentes estilos dentro de los elementos HTML. Estas transiciones las crearemos con la propiedad «transition» con la que podremos ajustar también su duración entre otros ajustes.

  • «transition-property» es la propiedad que se va a cambiar.
  • «transition-duration» es la duración en segundos.
  • «transition-timing-function» es el retraso en segundos.

Con el siguiente código CSS, crearemos una transición para que el tamaño de un elemento HTML aumente gradualmente:

transition: font-size 2s ease-in-out;

Resumen y ejemplo de CSS Input

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>

Conclusión

En resumen, dominar la personalización de campos de texto con CSS ofrece a los diseñadores y desarrolladores una poderosa herramienta para crear experiencias de usuario únicas y atractivas. Al optimizar la estética y la usabilidad de los campos de entrada, se puede aumentar la interacción y retención de los usuarios en un sitio web. Explorar las posibilidades de diseño que ofrece CSS para los inputs abre la puerta a la innovación y a la creación de interfaces más agradables y funcionales. Además, siempre puedes ayudarte de diversas herramientas CSS para saber los pasos sobre cómo diseñar una página web profesional.

Para llevar estas mejoras visuales y funcionales a la realidad online, es esencial considerar el entorno más amplio de un sitio web. La elección de un hosting web confiable garantiza que la página cargue rápidamente y esté disponible en todo momento, lo que contribuye a una experiencia de usuario satisfactoria y al mismo tiempo beneficia el posicionamiento en motores de búsqueda. Además, la selección de un dominio relevante y fácil de recordar aumenta la visibilidad y la identidad de marca en la web. Integrar estos aspectos en el proceso de diseño y desarrollo de sitios web es crucial para alcanzar un rendimiento óptimo y un impacto positivo en el público objetivo.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: