Cómo personalizar el campo de carga de archivos con CSS y Bootstrap 4

Código CSS

Los campos de carga de archivos son una parte importante de muchas aplicaciones web y sitios web modernos. Sin embargo, la apariencia predeterminada de estos campos a menudo puede ser aburrida y poco atractiva. En este artículo, te mostraremos cómo puedes personalizar el campo de carga de archivos utilizando CSS y Bootstrap 4 para mejorar su apariencia y adaptarlo a la estética de tu sitio web. Además, te daremos un ejemplo práctico de cómo hacerlo paso a paso.

En el ejemplo a continuación, crearemos un campo de carga de archivos personalizado que incluye un botón para seleccionar archivos y una sección para mostrar el nombre del archivo seleccionado. Para ello, utilizaremos algunas clases de Bootstrap y estilos de CSS personalizados.

Aquí te dejo un ejemplo de código CSS y HTML utilizando Bootstrap 4 para personalizar el campo de carga de archivos:

Código HTML:


<div class="custom-file">  <input type="file" class="custom-file-input" id="customFile">  <label class="custom-file-label" for="customFile">Seleccionar archivo</label></div>


Código CSS:


.custom-file-label::after {
  content: "Examinar";
}

.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}

.custom-file-input::before {
  content: 'Seleccionar archivo';
  display: inline-block;
  background: #007bff;
  color: #fff;
  border: none;
  padding: 5px 10px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: none;
}

.custom-file-input:hover::before {
  background-color: #0069d9;
}

.custom-file-input:active::before {
  background-color: #0062cc;
}

.custom-file-input:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}

.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}

.custom-file-input::before {
  content: 'Seleccionar archivo';
  display: inline-block;
  background: #007bff;
  color: #fff;
  border: none;
  padding: 5px 10px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: none;
}

.custom-file-input:hover::before {
  background-color: #0069d9;
}

.custom-file-input:active::before {
  background-color: #0062cc;
}

.custom-file-input:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}








tags: CSS, Bootstrap 4, carga de archivos, personalización, diseño web, front-end development.

En esta sección encontrarás una mezcla de códigos recopilados de fuentes públicas de Internet y otros creados por CoreASP. Estos recursos se comparten de buena fe con el único objetivo de servir como base de conocimiento en el desarrollo de aplicaciones en ASP Clásico. CoreASP no garantiza la precisión, vigencia ni funcionamiento de los artículos o fragmentos de código publicados, y no se hace responsable por el uso que se les dé. Se recomienda siempre revisar, adaptar y probar el código antes de implementarlo en entornos de producción.