Personalizar el control

Muchos desarrolladores han encontrado desafíos al diseñar el controlar. Este elemento generalmente muestra un cuadro de texto y un botón, que es posible que no siempre se alineen con la estética deseada.

Ocultar el cuadro de texto y conservar el botón

Para lograr una apariencia más limpia que Solo muestra el botón, podemos aprovechar las técnicas de CSS. Aquí hay una solución efectiva:

Código CSS:

/* Define the container div for positioning */
div.fileinputs {
  position: relative;
}

/* Style the fake file input that overlays the real one */
div.fakefile {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

/* Customize the button in the fake file input */
div.fakefile input[type=button] {
  cursor: pointer;
  width: 148px;
}

/* Hide the real file input element */
div.fileinputs input.file {
  position: relative;
  text-align: right;
  -moz-opacity: 0;
  filter: alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
}

Código HTML:

Explicación:

Este código CSS y HTML crea un contenedor div (.fileinputs) para posicionar los elementos. Dentro de este contenedor, agregamos un elemento de entrada de archivo falso (.fakefile) que aparece encima de la entrada del archivo real (.file). Al establecer la opacidad de la entrada real en 0, se vuelve invisible. Luego, el botón en la entrada del archivo falso se personaliza con el ancho y el estilo del cursor para mantener la funcionalidad y usabilidad.