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 ASP TEAM. Compartimos recursos útiles de buena fe para formar una base de conocimiento en el desarrollo de aplicaciones en ASP Clásico.