Personalizar el aspecto del elemento input de tipo file

input-file

Personalizar el aspecto del elemento input de tipo file

Uno de los problemas con el elemento de formulario input de tipo file, es que en cada navegador se muestra de forma diferente, y que darle aspecto con CSS no resulta fácil.

En el siguiente artículo veremos como darle el aspecto que queramos mediante un truco con el CSS position.

Para ello, lo primero que vamos a necesitar es colocar nuestro input de tipo file dentro de un elemento div. Para que todo quede lo más claro posible, vamos a modificar el aspecto de dos elementos input a la vez.

<div class="file-select" id="src-file1" >
  <input type="file" name="src-file1" aria-label="Archivo">
</div>

<div class="file-select" id="src-file2" >
  <input type="file" name="src-file2" aria-label="Archivo">  
</div>

Después, vamos a aplicar el siguiente código CSS

.file-select {			
  position: relative;
  display: inline-block;
}

.file-select::before {
  background-color: #5678EF;
  color: white;
  display: flex;			
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  content: 'Seleccionar'; /* testo por defecto */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;				
}

.file-select input[type="file"] {
  opacity: 0;
  width: 200px;
  height: 32px;
  display: inline-block;			
}

#src-file1::before {
  content: 'Seleccionar Archivo 1';
}

#src-file2::before {
  content: 'Seleccionar Archivo 2';
}

El resultado es el siguiente.

Input File Personalizado

Un par de input de tipo file personalizados con aspecto de botón.

Y ahora viene la explicación.

Lo que realmente estamos haciendo, no es darle aspecto al elemento input. En realidad estamos dándole aspecto a un elemento que se encuentra justo encima, tapando el input. Para ello hemos usado position: absolute; El elemento que estamos colocando encima del input en realidad no existe en el código HTML. Este elemento lo estamos creando mediante CSS con el pseudoselector ::before.

Este pseudoselector nos permite añadir un hijo al principio del elemento en cuestión (en nuestro ejemplo, al principio de cada div de la clase file-select). Es como si dentro de esos elementos div tuviéramos un elemento span con el texto que indicamos en la propiedad CSS content dentro de dicho span imaginario. Obviamente, nada nos impide usar elementos span en lugar del pseudoselector ::before.

Ese span imaginario, lo colocamos encima del input gracias al position: absolute; Por eso en el div tenemos el correspondiente position: relative; necesario para poder usar el position: absolute; correctamente.

Finalmente, para asegurarnos de que el input no molesta, le ponemos un opacity: 0; para volverlo totalmente transparente.

Y ya está. Con este sencillo ejemplo hemos visto como darle un aspecto de botón uniforme entre diferentes navegadores a un elemento input de tipo file. Espero que os haya resultado interesante y nos vemos en el próximo artículo.

Escribe un comentario